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

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

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

    Спасибо Дмитрий, весьма оригинальное решение :)

  2. 2

    …и в фиде тоже стили пропадают :) Я тупо смотрел на три черных надписи, пока не сообразил пойти посмотреть на первоисточник :)

  3. 3

    с css на самом деле можно такие вещи творить, что просто загляденье будет)

  4. 4
    данила
    @

    а что с семантикой при таком заголовке, типа поисковики не увидят или что просветите

  5. 5
    @

    Пасиба. В закладки, определенно.

  6. 6

    Градиентные заголовки мне по нраву!

    Кстати. Обратил внимание на заголовок статьи, заметил клевую тенюшку. Решил посмотреть, как сделано, но dragonfly в опере не стартовал почему-то и я открыл страницу в мозилле. Смотрю — а тени-то нет. Внимание, вопрос:
    если уж text-shadow не кроссплатформенен, то нельзя ли как-нибудь решить проблему тенюшек раз и навсегда для всех браузеров? Есть ли какие-нибудь элегантные решения? Или только блоки с позиционированием и z-indexы?

  7. 7

    да, мне тоже понравилось решение.
    пока только единожды использовал вариант с картинками для гладиента заголовков.
    буду использовать и этот (как раз сейчас есть подходящий проект)
    спасибо!

  8. 8

    2Лайфхакер:

    …и в фиде тоже стили пропадают

    А где еще?

    2Fenix:

    если уж text-shadow не кроссплатформенен, то нельзя ли как-нибудь решить проблему тенюшек раз и навсегда для всех браузеров? Есть ли какие-нибудь элегантные решения? Или только блоки с позиционированием и z-indexы?

    Насколько мне известно, кроссбраузерного и при том красивого решения пока не существует. text-shadow на данный момент поддерживает только Опера да Сафари (странно, что Хром, который на том же движке, не поддерживает). Знаю, что есть решение для IE с использованием, как обычно, скриптов-фильтров, но визуально результат отличается (не в лучшую сторону). А для FireFox я вообще ничего не встречал.

    Поэтому, если уж действительно очень хочется, и кроссбраузерно, то самый простой вариант — с дублированием заголовков + z-index.

    2данила:

    а что с семантикой при таком заголовке, типа поисковики не увидят или что просветите

    Семантика в верстке — когда каждый тег несет в себе смысловую нагрузку. К примеру, если у нас имеется абзац с текстом, то семантически правильно его поместить в специально предназначенный для этого тег <p>, нежели в тег <div> или какой-то другой.

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

    И к поисковикам это отношения не имеет.

  9. 9

    да, кстати, еще: это не только жертва семантики, но и валидности CSS :)

  10. 10

    nicothin, да, и этим тоже приходится жертвовать =)

  11. 11
    @


    opacity: 0.63;
    filter: alpha(opacity=63);
    -moz-opacity: 0.63;

    тут всё просто :) второе правило отдаём через СС, а вот поддержкой старых моззил (в пользу стандартов) можно иногда пожертвовать — не так уж и много их осталось.

  12. 12

    Jman, полностью согласен. Честно говоря, я даже не знаю, для какой именно версии предназначено -moz-opacity, я думал, что для FF2, а, оказывается, он прекрасно понимает opacity.

  13. 13

    Вау, не ожидал, что по средством css можно реализовать подобные заголовки.. Красивенько.

    Как обычно, спасибо, Дмитрий :)

  14. 14
    @

    Неудобно, что текст можно выделять, только с нижней стороны текста — сверху не дает слой, который помогает нам сделать «градиент.»

  15. 15

    milax, верно заметили. Отличилась только Опера, в которой текст выделяется, независимо от наличия этого слоя.

  16. 16

    milax, Dimox, имхо, это не так страшно.

  17. 17
    milax
    @

    Sonikelf, а я и не говорил, что это страшно, я писал о том, что это неудобно.

    P.S. Ссылку на свой блог оставлять не буду, Dimox все-равно сотрет ;)

  18. 18
    Евгений

    Здорово! Очень неплохое решение

  19. 19
    @

    А для FireFox я вообще ничего не встречал

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

  20. 20
    @

    Dimox, это глюк или нет? В низу прошлого комментария такая надпись: «[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.»