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

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

1. 

   Dimox

   15 лет 4 месяца назад

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

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

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

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

2. 

   Vladimir

   15 лет 4 месяца назад

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

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

3. 

   Dimox

   15 лет 4 месяца назад

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

4. 

   Андрей

   15 лет 4 месяца назад

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

5. 

   Олег

   15 лет 3 месяца назад

   Это круто!

   Два вопроса:

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

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

6. 

   Dimox

   15 лет 3 месяца назад

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

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

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

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

7. 

   Семен

   15 лет 3 месяца назад

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

8. 

   tillfy

   15 лет 3 месяца назад

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

9. 

   TanuSHka

   15 лет 3 месяца назад

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

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

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

10. 

    Alex

    15 лет 3 месяца назад

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

11. 

    iCat

    15 лет 2 месяца назад

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

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

    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. 

    Егор

    15 лет назад

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

13. 

    Влад

    14 лет 2 месяца назад

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

14. 

    Vincent

    13 лет 8 месяцев назад

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