Имитация градиентных заголовков на чистом CSS
Если вы периодически монитерите РУнет на предмет наличия статей о различных CSS-ных штучках, то вам наверняка попадалась техника создания заголовка с помощью обычного текста и одного полупрозрачного изображения-градиента в формате PNG.
Вот пример, который я имею в виду. Если коротко, то работает это следующим образом. Имеется вот такой заголовок с отдельно вложенным контейнером:
1 | <h1>Заголовок<b></b></h1> |
Контейнер <b></b> позиционируется поверх текста и в его фон помещается полупрозрачный градиент, который закрывает текст наполовину.
Альтернатива
Сегодня я хочу рассказать об очень похожей технике, которая, однако, не предполагает использование изображений вообще. Т.е. реализуется некая имитация градиентного заголовка, но только лишь с использованием технологии CSS.
Исходный html-код абсолютно не менятся, т.е. будет использоваться тот же самый код, что указан чуть выше. А разница будет лишь в используемых CSS-правилах. Выглядят они следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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%.
Спасибо Дмитрий, весьма оригинальное решение :)
…и в фиде тоже стили пропадают :) Я тупо смотрел на три черных надписи, пока не сообразил пойти посмотреть на первоисточник :)
с css на самом деле можно такие вещи творить, что просто загляденье будет)
Пасиба. В закладки, определенно.
Градиентные заголовки мне по нраву!
Кстати. Обратил внимание на заголовок статьи, заметил клевую тенюшку. Решил посмотреть, как сделано, но dragonfly в опере не стартовал почему-то и я открыл страницу в мозилле. Смотрю - а тени-то нет. Внимание, вопрос:
если уж text-shadow не кроссплатформенен, то нельзя ли как-нибудь решить проблему тенюшек раз и навсегда для всех браузеров? Есть ли какие-нибудь элегантные решения? Или только блоки с позиционированием и z-indexы?
а что с семантикой при таком заголовке, типа поисковики не увидят или что просветите
да, мне тоже понравилось решение.
пока только единожды использовал вариант с картинками для гладиента заголовков.
буду использовать и этот (как раз сейчас есть подходящий проект)
спасибо!
2Лайфхакер:
А где еще?
2Fenix:
Насколько мне известно, кроссбраузерного и при том красивого решения пока не существует. text-shadow на данный момент поддерживает только Опера да Сафари (странно, что Хром, который на том же движке, не поддерживает). Знаю, что есть решение для IE с использованием, как обычно, скриптов-фильтров, но визуально результат отличается (не в лучшую сторону). А для FireFox я вообще ничего не встречал.
Поэтому, если уж действительно очень хочется, и кроссбраузерно, то самый простой вариант - с дублированием заголовков + z-index.
2данила:
Семантика в верстке - когда каждый тег несет в себе смысловую нагрузку. К примеру, если у нас имеется абзац с текстом, то семантически правильно его поместить в специально предназначенный для этого тег <p>, нежели в тег <div> или какой-то другой.
Поэтому, если смотреть на пример в статье с точки зрения семантики, то пустого контейнера <b></b> здесь не должно быть. Надеюсь, что понятно объяснил.
И к поисковикам это отношения не имеет.
да, кстати, еще: это не только жертва семантики, но и валидности CSS :)
nicothin, да, и этим тоже приходится жертвовать =)
2
3
filter: alpha(opacity=63);
-moz-opacity: 0.63;
тут всё просто :) второе правило отдаём через СС, а вот поддержкой старых моззил (в пользу стандартов) можно иногда пожертвовать — не так уж и много их осталось.
Jman, полностью согласен. Честно говоря, я даже не знаю, для какой именно версии предназначено -moz-opacity, я думал, что для FF2, а, оказывается, он прекрасно понимает opacity.
Вау, не ожидал, что по средством css можно реализовать подобные заголовки.. Красивенько.
Как обычно, спасибо, Дмитрий :)
Неудобно, что текст можно выделять, только с нижней стороны текста — сверху не дает слой, который помогает нам сделать «градиент.»
milax, верно заметили. Отличилась только Опера, в которой текст выделяется, независимо от наличия этого слоя.
milax, Dimox, имхо, это не так страшно.
Sonikelf, а я и не говорил, что это страшно, я писал о том, что это неудобно.
P.S. Ссылку на свой блог оставлять не буду, Dimox все-равно сотрет ;)
Здорово! Очень неплохое решение
FireFox поддерживает text-shadow, правда, только с версии 3.1
Dimox, это глюк или нет? В низу прошлого комментария такая надпись: “[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.”
Спасибо, будем знать.
Это плагин для отлова спама. Надпись говорит о том, что у тебя отключен JavaScript.
Включен у меня JavaScript. FireFox/3.04 Linux 64-bit.
А AdBlock банит только баннеры флэшовые, стороннюю рекламу и парочку гифов.
Значит глючный этот плагин. Отключил его нафиг.
Прикольно. Займусь этим на днях..
Главное чтобы во всех браузерах работало..
Это круто!
Два вопроса:
1. Как сделать так, чтобы не 2 цвета было, а скажем 5? Просто я вообще не бумбум в этом.
2. Что нельзя сделать через CSS? :) Просто я помню, Гомера Симпсона в CSS шрифтами нарисованного…
Не представляю, как это должно выглядеть. Добавлять нужно по аналогии с вложенным элементом <b></b>. Зачем в заголовке делать 5 цветов?
Не понял вопроса.
Все работает! Красота!
Спасибо большое, это украсит мой блог.
Очень симпатично выгладит. Спасибо, будем юзать!
Хоть и простенько, но зато красивенько :)
А это только для IE 6? Просто пыталась сделать, в Опере как был обычный текст, так и остался. Если вдруг прочитаете данный комментарий, то прошу о помощи :) Хотела бы в блоге поменять заголовок, как в примерах 3-я строка (серые цвета).
Заранее спасибо!
Действительно, результат смотрится достаточно приятно. Однако использовать больше двух цветов, думаю не стоит, иначе будет визуальная каша.
Решаемо при помощи:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.
Жаль, что только однострочные заголовки поддерживаются
У меня такой трабл, все сделал, переделал ничего не помогает. Заливает тупо всю строку от начала сайта до конца вместе с нужным текстом!!
респект! спасибо, как раз то что нужно