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, который, судя по исходному коду, работает на совсем небольшом JS-скрипте. - CSS: text shadows.
- Stylish text with the CSS text-shadow property (обратите внимание на пример огненного текста).
- CSS Text-Shadow in Safari, Opera, Firefox and more.
- Text-Shadow Exposed: Make cool and clever text effects with css text-shadow.
- На данном блоге также можно увидеть эффект от применения
text-shadow: добавлена тень к заголовкам, у внутристрочных вставок кода реализован эффект вдавленности текста.
В общем, экспериментируйте с прекрасным свойством text-shadow, украшая текст на вашем сайте. Вариантов его применения, как видно из примеров, можно придумать множество.
Смотрите также
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но ...
Пример верстки поисковой формы для сайта
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы – это поле ввода текста ...
Комментарии (28)
Сенк, попробую у себя в блоге
Давно пользуюсь. А что до Internet Explorer, то в нем можно подобный ефект реализовать при помощи фильтров DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.Glow, DXImageTransform.Microsoft.blur. Но получается громоздко, неудобно и не очень красиво. :)
Да, выглядит некрасиво, поэтому лучше не пользоваться.
Тут же применил в своем блоге – спасибо за наводку..
Наконец, появилось долгожданная штука. А то постоянно заказчики мозги долбят, я хочу тень, хочу и все. И постоянно приходилось решать эту проблему разными способами. Одному надо, что бы не дублировалось сообщение, но отображалась тень – решалось через JavaScript. Второму что бы, работало везде без JS-а – решалось простыми накладками с помощью CSS и PHP. Но теперь, осталось пождать пока мелкомягкий родит.
Что-то мне подсказывает, что родит он не скоро =)
Пока не появится полная поддержка во всех браузерах – это бесполезная вещь… Сам использую решение на jQuery.
Для пользователей IE – да, бесполезная, для остальных – нет.
Все же IE – это не меньшинство… согласись, неприятно знать что твой сайт у кого-то отображается не так как ты хочешь :)
У сабжевого свойства есть еще одно толковое применение — приведение в порядок излишне жирных шрифтов у Safari под «Винду» (особенно если светлый текст располагается на темной фоне). Добавляем в CSS-файл объявление
text-shadow: #000 0 0 0;к целевому элементу, и всё становится веселей.
Действительно помогает =) Спасибо за информацию, будем знать.
P.S. Не понимаю, почему его разработчики до сих пор не могут сделать в Винде нормальный шрифт…
Потому что Apple не любят винду))
Раньше не встречал, заметил у вас на блоге в нумерации комментраиев, смотрится замечательно ))
У #commentform textarea { padding:0 0 0 4px;} на 5px просится. Смотрю в FF 3.5.1 разрешение 1400*1280.
Смотрится все замечательно, свежо и не заезжено. Тема достойная внимания.
Если в IE подобрать адекватные значения для Color и Strength в фильтре Shadow, то результат может быть и получше.
IE это отстой полный! Как можно вообще таки бразером пользоваться? :D Я в нем и 5 минут опсерфит немогу! начинаю по клаве молотить от злости =) вот Лиса єто другое дело!
Спасибо за повод применить его и на своём блоге :) А IE это мега зло, раньше ещё юзал его через Avant, но когда начали появляться норм оперы и 3ая версия мозилы, тогда вообще отказался от него… Хотя webmoney конечно работает с осликом автоматом :(
Интересное решение для ссылок, появляется некий эфект 3-х мерности
В твоём блоге мне не понравилось появление text-shadow.
По-моему, он хорошо смотрится, когда тень резкая, причём использовать лучше, чтоб создать контраст между текстом и фоном.
Также хорошо смотрится, если тест светлый, а фон тёмный.
А у тебя смотрится как-то размыто и китчево.
Не стоит применять технологии и модные фишки «чтобы было».
p.s. текст в хедере и номера комментов клёво смотрятся.
жаль что данный эфеект не отрабатывает не только в эксплорере, но и в мазиле :(
Ставьте последний релиз, в нем работает.
ПРОСТО СУПЕР!!!
Спасибо, нашла то, что искала :)
{text-shadow: 2px 3px 1px #CCC, -3px 3px yellow, green 3px -3px 10px;}
Спасибо за инфу про множество.
text-shadow: 0 1px 3px #FFFFFF, 0 -1px 3px #FFFFFF, 1px -1px 3px #FFFFFF, -1px -1px 3px #FFFFFF;
Таким образом я сделал усиленное свечение белым
а как быть с валидацией? как заставить проходить ее css2.1?
Никак, потому что text-shadow относится к CSS3.
Здравствуйте. А вы пробовали применять text-shadow для input type=button в Opera ?
Не показывается :(