Делаем градиент к тексту, используя CSS

Делаем градиент к тексту, используя CSS как несложно сделать градиент у текста при помощи CSS

Добавляем пустой тег <span> в заголовок:

<h1><span></span>CSS Gradient Text</h1>

В файл стилей .css добавляем:


h1 {
    font: bold 330%/100% "Lucida Grande";
    color: #464646;
/* тут соль */
    position: relative;
}
h1 span {
/* указываем изображение с градиентом */
    background: url(gradient.png) repeat-x;
/*позиционируем абсолютно */
    position: absolute;
/*отображаем блоком на всю ширину заголовка */
    display: block;
    width: 100%;
    height: 31px;
}

 

надо еще повоевать с IE6, для этого в HTML код вставляем следующее:


<!--[if lt IE 7]>
<style>
h1 span {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->


Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C http://www.w3.org/Style/Examples/007/text-shadow.html

Автор русского перевода: Евгений Скрипец (все переводы автора: en, ru, uk )

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (1)     Подпишитесь на RSS комментариев к этой статье.

1 комментарий

#876
IPeredero говорит:
May 19, 2013 at 11:22 am
А без картинки можно? Только посредством CSS и всё

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.