Антон Шевчук // Web-разработчик

CSS градиент // HTML and CSS

CSS Gradient

Вы хотите добавить эффект градиента для заголовков на страницах вашего сайта, но не хотите заморачиваться с Photoshop’ом? Ну тогда данная статья для Вас.

Это простенький CSS трюк, покажет Вам как можно добавить эффект градиента при помощи PNG картинки (никакого Flash’a и JavaScript’a, только CSS). Всё что Вам потребуется – это добавить пустой тэг <span> в ваши заголовки (имеется ввиду <h1>,<h2> и т.д.) и указать фоновое изображение. Этот способ работает практически во всех браузерах.

Начнем с HTML – добавляем пустой тэг <span> в заголовок:

&lt;h1&gt;&lt;span&gt;&lt;/span&gt;CSS Gradient Text&lt;/h1&gt;

Ну и естественно изменяем CSS:

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

И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).

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

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

Кстати, если Вы не хотите править горы HTML кода, за Вас это может сделать jQuery:

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
    //prepend span tag to H1
    $(&quot;h1&quot;).prepend(&quot;&lt;span&gt;&lt;/span&gt;&quot;);
});
&lt;/script&gt;

Вольный перевод : http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

© Антон Шевчук 2007-2023