Главная CSS-верстка

CSS-свойство text-shadow преобразит текст на вашем сайте

CSS-свойство text-shadow Был удивлен, когда, погуглив по данному блогу, обнаружил, что я ни разу не писал о таком замечательном CSS-свойстве, как text-shadow. А ведь оно стоит внимания, тем более, что с недавнего времени к поддерживающим его браузерам присоединился вышедший некоторое время назад FireFox 3.1.

Таким образом, на сегодняшний день text-shadow, которое описано в спецификации CSS3 (ранее было в CSS2 и CSS2.1), поддерживают следующие браузеры: Opera 9.5+, Safari 3+, Firefox 3.1+ и Google Chrome 2+.

Хорошая особенность этого свойства заключается в том, что в популярном браузере Internet Explorer, который его не поддерживает (включая IE8), при отстутствии тени (в большинстве возможных вариантов) читабельность текста не снижается. Поэтому text-shadow можно смело использовать. А пользователи IE в очередной раз не увидят всей прелести современных технологий («спасибо» Майкрософту =).

Описание свойства text-shadow

Рассмотрим на следующем примере:

h1 { text-shadow: 2px 3px 1px #CCC; }
  • Первое значение (2px) — смещение тени по горизонтали относительно текста (может быть отрицательным); положительное значение смещает тень вправо, отрицательное — влево.
  • Второе значение (3px) — смещение тени по вертикали (может быть отрицательным); положительное значение смещает тень вниз, отрицательное — вверх.
  • Третье значение (1px) — размытие тени; не обязательно.
  • Четвертое значение (#CCC) — цвет тени; не обязательно; если не указано, используется цвет текста; можно ставить либо первым значением, либо последним.

Кроме того, свойство text-shadow позволяет создавать множественные тени. Для этого через запятую нужно указать дополнительный ряд значений, например:

h1 { text-shadow: 2px 3px 1px #CCC, -3px 3px yellow, green 3px -3px 10px; }

Примеры и ссылки по теме

В общем, экспериментируйте с прекрасным свойством text-shadow, украшая текст на вашем сайте. Вариантов его применения, как видно из примеров, можно придумать множество.

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

  1. Сенк, попробую у себя в блоге

  2. Давно пользуюсь. А что до Internet Explorer, то в нем можно подобный ефект реализовать при помощи фильтров DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.Glow, DXImageTransform.Microsoft.blur. Но получается громоздко, неудобно и не очень красиво. :)

  3. Тут же применил в своем блоге — спасибо за наводку.

  4. Наконец, появилось долгожданная штука. А то постоянно заказчики мозги долбят, я хочу тень, хочу и все. И постоянно приходилось решать эту проблему разными способами. Одному надо, что бы не дублировалось сообщение, но отображалась тень — решалось через JavaScript. Второму что бы, работало везде без JS-а — решалось простыми накладками с помощью CSS и PHP. Но теперь, осталось пождать пока мелкомягкий родит.

  5. Пока не появится полная поддержка во всех браузерах — это бесполезная вещь… Сам использую решение на jQuery.

  6. Денис Беляевский
    14 лет 8 месяцев назад

    У сабжевого свойства есть еще одно толковое применение — приведение в порядок излишне жирных шрифтов у Safari под «Винду» (особенно если светлый текст располагается на темной фоне). Добавляем в CSS-файл объявление

    text-shadow: #000 0 0 0;

    к целевому элементу, и всё становится веселей.

  7. Раньше не встречал, заметил у вас на блоге в нумерации комментраиев, смотрится замечательно))

    У #commentform textarea { padding:0 0 0 4px;} на 5px просится. Смотрю в FF 3.5.1 разрешение 1400*1280.

  8. Смотрится все замечательно, свежо и не заезжено. Тема достойная внимания.

  9. Если в IE подобрать адекватные значения для Color и Strength в фильтре Shadow, то результат может быть и получше.

  10. IE это отстой полный! Как можно вообще таки бразером пользоваться? :D Я в нем и 5 минут опсерфит немогу! начинаю по клаве молотить от злости =) вот Лиса єто другое дело!

  11. Спасибо за повод применить его и на своём блоге :) А IE это мега зло, раньше ещё юзал его через Avant, но когда начали появляться норм оперы и 3ая версия мозилы, тогда вообще отказался от него… Хотя webmoney конечно работает с осликом автоматом :(

  12. Интересное решение для ссылок, появляется некий эфект 3-х мерности

  13. В твоём блоге мне не понравилось появление text-shadow.

    По-моему, он хорошо смотрится, когда тень резкая, причём использовать лучше, чтоб создать контраст между текстом и фоном.
    Также хорошо смотрится, если тест светлый, а фон тёмный.

    А у тебя смотрится как-то размыто и китчево.

    Не стоит применять технологии и модные фишки «чтобы было».

  14. жаль что данный эфеект не отрабатывает не только в эксплорере, но и в мазиле :(

  15. ПРОСТО СУПЕР!!!

  16. Спасибо, нашла то, что искала :)
    {text-shadow: 2px 3px 1px #CCC, -3px 3px yellow, green 3px -3px 10px;}

  17. Спасибо за инфу про множество.

    text-shadow: 0 1px 3px #FFFFFF, 0 -1px 3px #FFFFFF, 1px -1px 3px #FFFFFF, -1px -1px 3px #FFFFFF;

    Таким образом я сделал усиленное свечение белым

  18. а как быть с валидацией? как заставить проходить ее css2.1?

  19. Здравствуйте. А вы пробовали применять text-shadow для input type=button в Opera?
    Не показывается :(