Имитация градиентных заголовков на чистом CSS

Если вы периодически монитерите РУнет на предмет наличия статей о различных CSS-ных штучках, то вам наверняка попадалась техника создания заголовка с помощью обычного текста и одного полупрозрачного изображения-градиента в формате PNG. Вот пример, который я имею в виду. Если коротко, то работает это ...

Комментарии (34)
  1. 1

    FireFox поддерживает text-shadow, правда, только с версии 3.1

    Спасибо, будем знать.

    Dimox, это глюк или нет?

    Это плагин для отлова спама. Надпись говорит о том, что у тебя отключен JavaScript.

  2. 2
    @

    Включен у меня JavaScript. FireFox/3.04 Linux 64-bit.

    А AdBlock банит только баннеры флэшовые, стороннюю рекламу и парочку гифов.

  3. 3

    Значит глючный этот плагин. Отключил его нафиг.

  4. 4
    Андрей

    Прикольно. Займусь этим на днях..
    Главное чтобы во всех браузерах работало..

  5. 5
    Олег
    @

    Это круто!

    Два вопроса:

    1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.

    2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…

  6. 6

    1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.

    Не представляю, как это должно выглядеть. Добавлять нужно по аналогии с вложенным элементом <b></b>. Зачем в заголовке делать 5 цветов?

    2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…

    Не понял вопроса.

  7. 7
    Семен

    Все работает! Красота!
    Спасибо большое, это украсит мой блог.

  8. 8
    tillfy

    Очень симпатично выгладит. Спасибо, будем юзать!

  9. 9
    TanuSHka

    Хоть и простенько, но зато красивенько :)

    А это только для IE 6? Просто пыталась сделать, в Опере как был обычный текст, так и остался. Если вдруг прочитаете данный комментарий, то прошу о помощи :) Хотела бы в блоге поменять заголовок, как в примерах 3-я строка (серые цвета).

    Заранее спасибо!

  10. 10
    Alex

    Действительно, результат смотрится достаточно приятно. Однако использовать больше двух цветов, думаю не стоит, иначе будет визуальная каша.

  11. 11
    iCat
    @

    во-вторых, проклятый не понимает процентной высоты для слоя , также закрывая текст полностью, поэтому пришлось задавать его высоту в пикселях.

    Решаемо при помощи:

    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: 60%; /* Высота в процентах для всех браузеров */
     background: #FFF;
     overflow: hidden /* для проклятого IE6 */;
     opacity: 0.63;
     filter: alpha(opacity=63);
     -moz-opacity: 0.63;
    }
    
    /* Решение для IE6 нужно вынести в файл ie6.css как обычно */
    *html h1 {height: 0;}
    *html h1 b {height: expression(this.parentNode.clientHeight * 0.6);}
    

    ;)

    Понятно, что это грабли, но это позволит изменять размер шрифта, задавая всего одно значение — для h1.

  12. 12
    Егор

    Жаль, что только однострочные заголовки поддерживаются

  13. 13
    Влад
    @

    У меня такой трабл, все сделал, переделал ничего не помогает. Заливает тупо всю строку от начала сайта до конца вместе с нужным текстом!!

  14. 14

    респект! спасибо, как раз то что нужно