Имитация градиентных заголовков на чистом CSS
Если вы периодически монитерите РУнет на предмет наличия статей о различных CSS-ных штучках, то вам наверняка попадалась техника создания заголовка с помощью обычного текста и одного полупрозрачного изображения-градиента в формате PNG.
Вот пример, который я имею в виду. Если коротко, то работает это следующим образом. Имеется вот такой заголовок с отдельно вложенным контейнером:
<h1>Заголовок<b></b></h1>
Контейнер <b></b> позиционируется поверх текста и в его фон помещается полупрозрачный градиент, который закрывает текст наполовину.
Альтернатива
Сегодня я хочу рассказать об очень похожей технике, которая, однако, не предполагает использование изображений вообще.
Исходный html-код абсолютно не менятся,
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> белым цветом и придали ему прозрачности (последние 3 правила, для кроссбраузерности), при этом разместив его поверх заголовка так, чтобы закрыть текст примерно наполовину.
Как и обычно, IE6 «вставил нам палки в колеса». Во-первых, из-за него пришлось дописывать дополнительное правило overflow: hidden, иначе полупрозрачный слой закрывает текст полностью, во-вторых, проклятый не понимает процентной высоты для слоя <b></b>, также закрывая текст полностью, поэтому пришлось задавать его высоту в пикселях.
Примеры
Смотрим живые примеры (если в своей RSS-читалке вы наблюдаете просто заголовки, то перейдите на блог):
Это псевдо-градиентный заголовок
Еще один красивый заголовочек
Ну и последний за компанию
Согласитесь, красиво? Я считаю, ради красивости семантикой в данном случае можно и пожертвовать.
В общем, пробуем и при подходящем случае используем на своих сайтах =)
Источник описанной техники — Optimized Css Text Gradient.
P.S. Интересно отметить, что автор статьи-источника совсем не обратил внимания на то, что в IE6 его техника не работает. Это весьма удивительно (то, что не обратил внимания), учитывая тот факт, что англоязычных пользователей IE6 более 50%.
Комментарии (34)
Спасибо, будем знать.
Это плагин для отлова спама. Надпись говорит о том, что у тебя отключен JavaScript.
Включен у меня JavaScript. FireFox/3.04 Linux 64-bit.
А AdBlock банит только баннеры флэшовые, стороннюю рекламу и парочку гифов.
Значит глючный этот плагин. Отключил его нафиг.
Прикольно. Займусь этим на днях.
Главное чтобы во всех браузерах работало.
Это круто!
Два вопроса:
1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.
2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…
Не представляю, как это должно выглядеть. Добавлять нужно по аналогии с вложенным элементом
<b></b>. Зачем в заголовке делать 5 цветов?Не понял вопроса.
Все работает! Красота!
Спасибо большое, это украсит мой блог.
Очень симпатично выгладит. Спасибо, будем юзать!
Хоть и простенько, но зато красивенько :)
А это только для IE 6? Просто пыталась сделать, в Опере как был обычный текст, так и остался. Если вдруг прочитаете данный комментарий, то прошу о помощи :) Хотела бы в блоге поменять заголовок, как в примерах 3-я строка (серые цвета).
Заранее спасибо!
Действительно, результат смотрится достаточно приятно. Однако использовать больше двух цветов, думаю не стоит, иначе будет визуальная каша.
Решаемо при помощи:
;)
Понятно, что это грабли, но это позволит изменять размер шрифта, задавая всего одно значение — для h1.
Жаль, что только однострочные заголовки поддерживаются
У меня такой трабл, все сделал, переделал ничего не помогает. Заливает тупо всю строку от начала сайта до конца вместе с нужным текстом!
респект! спасибо, как раз то что нужно