Главная » Полезные статьи » HTML-верстка » Делаем градиент к тексту, используя 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

Источник:  loco.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи