Главная » Создание сайтов » Верстка » Красивый градиент для текста с помощью css

Красивый градиент для текста с помощью css

Красивый градиент для текста с помощью css
Наверняка выпользовались обычным текстом и одним полупрозрачным изображением-градиента в формате PNG. Не спорю, можно сделать так и из одной картинки. Однако я хочу предложить пример создания, который не предпологает никаких картинок.

Создаем html файл:

<h1>Текст<b></b></h1>

Дальше создаем правила в css:

h1 {
font: 32px Georgia, "Times New Roman";
position: relative; /* обязательно */
color: #0094D6;
margin: 10px 0;
padding: 0;
}
h1 b {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 23px;
background: #FFF;
overflow: hidden /* для проклятого IE6 */;
opacity: 0.63;
filter: alpha(opacity=63);
-moz-opacity: 0.63;
}


Не разобрались? Вот:

Контэйнер <b></b> заливаем фоном, и придаем ему прозрачность.

Вот и готов нащ красивый текст ;).

С уважением, Vasilenko Ivan!

Комментарии — 17 комментариев

  1. #18717 vanoID в 20:20, 29 августа 2012:

    Ответить | Цитировать

  2. #43757 Евгений в 12:49, 5 января 2015:

    Ответить | Цитировать

    На белом фоне только работает, ан других фонах потемнее все будет ужасно, поэтому код практически не рабочий и редко будет необходим. Необходимо гибко подходить к решению задачи.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting