Градиент текста, средствами CSS

Добавлен: 2011-12-27 21:22:48

Градиент текста, средствами CSS

Иногда может стать задача, создать градиент для текста, для его красивого оформления, сделать это можно просто заменив текст изображением, но это никуда не годится. Изображение долго редактировать в дальнейшем, оно много весит, и поисковики изображение “не поймут”. А сделать градиент на тексте можно при помощи CSS.

Принцип работы градиента для изображения на CSS

Принцип, в том, что на текст, по всей его длине, накладывается изображение с шириной, скажем 1px и высотой уже зависимо от нужного градиента и от размера шрифта, изображение будет повторятся по оси X (по горизонтали) бесконечное количество раз. Используемое изображение будет в формате PNG, иметь определённую прозрачность, и будет собственно являться накладываемым градиентом. Но есть ограничение, общий фон, должен совпадать с цветом градиента, или быть таким же градиентом самому.

Код CSS

.gradient{
position:absolute;
width:100%;
height:70px;
background:url(gradient.png) repeat-x;
}

Код HTML

<div class="gradient"></div> xDroid.org.ua

Результат

градиент текста на CSS

Выше представлен, лишь один из большого множества вариантов, вы так же можете изменять код под ваши нужды, тут указан лишь пример.

Поделиться:

Добавление комментария