Имитация градиентных заголовков на чистом CSS
Если вы периодически монитерите РУнет на предмет наличия статей о различных CSS-ных штучках, то вам наверняка попадалась техника создания заголовка с помощью обычного текста и одного полупрозрачного изображения-градиента в формате PNG. Вот пример, который я имею в виду. Если коротко, то работает это следующим образом. ...
Комментарии (34)
Спасибо Дмитрий, весьма оригинальное решение :)
…и в фиде тоже стили пропадают :) Я тупо смотрел на три черных надписи, пока не сообразил пойти посмотреть на первоисточник :)
с css на самом деле можно такие вещи творить, что просто загляденье будет)
а что с семантикой при таком заголовке, типа поисковики не увидят или что просветите
Пасиба. В закладки, определенно.
Градиентные заголовки мне по нраву!
Кстати. Обратил внимание на заголовок статьи, заметил клевую тенюшку. Решил посмотреть, как сделано, но dragonfly в опере не стартовал почему-то и я открыл страницу в мозилле. Смотрю — а тени-то нет. Внимание, вопрос:
если уж text-shadow не кроссплатформенен, то нельзя ли как-нибудь решить проблему тенюшек раз и навсегда для всех браузеров? Есть ли какие-нибудь элегантные решения? Или только блоки с позиционированием и z-indexы?
да, мне тоже понравилось решение.
пока только единожды использовал вариант с картинками для гладиента заголовков.
буду использовать и этот (как раз сейчас есть подходящий проект)
спасибо!
2Лайфхакер:
А где еще?
2Fenix:
Насколько мне известно, кроссбраузерного и при том красивого решения пока не существует. text-shadow на данный момент поддерживает только Опера да Сафари (странно, что Хром, который на том же движке, не поддерживает). Знаю, что есть решение для IE с использованием, как обычно, скриптов-фильтров, но визуально результат отличается (не в лучшую сторону). А для FireFox я вообще ничего не встречал.
Поэтому, если уж действительно очень хочется, и кроссбраузерно, то самый простой вариант — с дублированием заголовков + z-index.
2данила:
Семантика в верстке — когда каждый тег несет в себе смысловую нагрузку. К примеру, если у нас имеется абзац с текстом, то семантически правильно его поместить в специально предназначенный для этого тег
<p>
, нежели в тег<div>
или какой-то другой.Поэтому, если смотреть на пример в статье с точки зрения семантики, то пустого контейнера
<b></b>
здесь не должно быть. Надеюсь, что понятно объяснил.И к поисковикам это отношения не имеет.
да, кстати, еще: это не только жертва семантики, но и валидности CSS :)
nicothin, да, и этим тоже приходится жертвовать =)
opacity: 0.63;
filter: alpha (opacity=63);
-moz-opacity: 0.63;
тут всё просто :) второе правило отдаём через СС, а вот поддержкой старых моззил (в пользу стандартов) можно иногда пожертвовать — не так уж и много их осталось.
Jman, полностью согласен. Честно говоря, я даже не знаю, для какой именно версии предназначено
-moz-opacity
, я думал, что для FF2, а, оказывается, он прекрасно понимаетopacity
.Вау, не ожидал, что по средством css можно реализовать подобные заголовки. Красивенько.
Как обычно, спасибо, Дмитрий :)
Неудобно, что текст можно выделять, только с нижней стороны текста — сверху не дает слой, который помогает нам сделать «градиент.»
milax, верно заметили. Отличилась только Опера, в которой текст выделяется, независимо от наличия этого слоя.
milax, Dimox, имхо, это не так страшно.
Sonikelf, а я и не говорил, что это страшно, я писал о том, что это неудобно.
Здорово! Очень неплохое решение
FireFox поддерживает text-shadow, правда, только с версии 3.1
Dimox, это глюк или нет? В низу прошлого комментария такая надпись: «[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.»