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

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

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

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

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

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

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

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

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

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

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

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

  1. #148 Ivan в 20:29, 2 декабря 2008:

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

    Красиво и просто! Спасибо!

  2. #218 PretorianetZ в 1:20, 16 января 2009:

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

    РЕСПЕКТ автору ! искал градиент пару дней но то что сделал ты, лучшая реализация !

  3. #9490 Korobasow в 20:01, 21 марта 2010:

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

    Спасибо, очень понадобилось!!!

  4. #10693 1_2_3_05 в 11:54, 8 ноября 2010: (подписался)

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

    изображения конечного результата не хватает в статье.

  5. #10715 RedMonkey в 14:52, 19 ноября 2010: (подписался)

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

    Прикольный урок, единственное что пару вещей не понял:

    1. Равна ли такая запись h1 {} такой pre h1 {} и начиная с какой версии css она доступна.

    2. Что делает такая запись:

    h1 {

    position: relative;

    }

    Буди очень признателен если поясните.

  6. #10716 RedMonkey в 15:04, 19 ноября 2010: (подписался)

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

    Чёрт, все теги восприняло.

    *1. h1 {} такой pre h1 {} и начиная с какой версии css она доступна.

    *2. Что делает такая запись:

    h1 {

    position: relative;

    }

    PS сори за двойной комент

  7. #10717 RedMonkey в 15:07, 19 ноября 2010: (подписался)

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

    *1. h1 {} такой pre h1 {} и начиная с какой версии css она доступна.

    *2. Что делает такая запись:

    h1 {

    position: relative;

    }

  8. #10718 RedMonkey в 15:35, 19 ноября 2010: (подписался)

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

    *1. [пре] h1 {}[/пре] такой pre h1 {} и начиная с какой версии css она доступна.

    *2. Что делает такая запись:

    [пре] h1 {

    [спан style="color: #ff0000;"]position: relative;[/спан]

    }[/пре]

    надеюсь такую запись тегов не порежет и если можно удалите предыдущие коменты

  9. #10807 Jarmush в 10:16, 25 декабря 2010: (подписался)

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

    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#cccccc', endColorstr='#000000'); /* for IE */

    background: -webkit-gradient (linear, left top, left bottom, from (#ccc), to (#000)); /* for webkit browsers */

    background: -moz-linear-gradient (top, #ccc, #000); /* for firefox 3.6+ */

    А вот так можно сделать градиент, а не его имитацию.

  10. #11221 Asius в 12:58, 29 марта 2011: (подписался)

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

    В IE видно только нижнюю часть текста. Подскажите в чем проблема?

  11. Asius, возможно проблема с прозрачностью в ие.

  12. #12508 Ваня в 10:54, 30 июля 2011:

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

    Классная вещь, так как всё лепить картинками просто неудобно! Но хочу заметить что пример не особо удобно читать я открыл пример и только там увидел нужный и праильный css

  13. #16148 kanasy в 4:47, 30 мая 2012:

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

    Все бы хорошо, но работает только на белом фоне

  14. #17487 Serega в 22:33, 10 июля 2012:

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

    Ваня писал(а):

    #12508

    Ваня

    в 10:54, 30 июля 2011:

    Ответить |

    Цитировать

    Классная вещь, так как всё лепить картинками просто неудобно! Но хочу заметить что пример не особо удобно читать я открыл пример и только там увидел нужный и правильный css

    Поддерживаю. Штука классная, но спасает только пример :)

    P.S. работает не только на белом фоне, корректируйте вот этот кусок:

    height: 23px;

    background: #FFF;

    overflow: hidden /*

    ... и будет вам счастье.

  15. #18716 Александр в 18:48, 29 августа 2012:

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

    Ты идиота кусок, подай нормально код, где ты увидел тэг спан?

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

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

    @ Александр:

    Например, тут htmlbook.ru/html/span

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

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

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

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя