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
Рассмотрим на следующем примере:
1 | h1 { text-shadow: 2px 3px 1px #CCC; } |
- Первое значение (2px) - смещение тени по горизонтали относительно текста (может быть отрицательным); положительное значение смещает тень вправо, отрицательное - влево.
- Второе значение (3px) - смещение тени по вертикали (может быть отрицательным); положительное значение смещает тень вниз, отрицательное - вверх.
- Третье значение (1px) - размытие тени; не обязательно.
- Четвертое значение (#CCC) - цвет тени; не обязательно; если не указано, используется цвет текста; можно ставить либо первым значением, либо последним.
Кроме того, свойство text-shadow позволяет создавать множественные тени. Для этого через запятую нужно указать дополнительный ряд значений, например:
1 | 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, украшая текст на вашем сайте. Вариантов его применения, как видно из примеров, можно придумать множество.
Сенк, попробую у себя в блоге
Давно пользуюсь. А что до Internet Explorer, то в нем можно подобный ефект реализовать при помощи фильтров DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.Glow, DXImageTransform.Microsoft.blur. Но получается громоздко, неудобно и не очень красиво. :)
Тут же применил в своем блоге - спасибо за наводку..
Да, выглядит некрасиво, поэтому лучше не пользоваться.
Наконец, появилось долгожданная штука. А то постоянно заказчики мозги долбят, я хочу тень, хочу и все. И постоянно приходилось решать эту проблему разными способами. Одному надо, что бы не дублировалось сообщение, но отображалась тень – решалось через JavaScript. Второму что бы, работало везде без JS-а - решалось простыми накладками с помощью CSS и PHP. Но теперь, осталось пождать пока мелкомягкий родит.
Что-то мне подсказывает, что родит он не скоро =)
Пока не появится полная поддержка во всех браузерах - это бесполезная вещь… Сам использую решение на jQuery.
Для пользователей IE - да, бесполезная, для остальных - нет.
Все же IE - это не меньшинство… согласись, неприятно знать что твой сайт у кого-то отображается не так как ты хочешь :)
У сабжевого свойства есть еще одно толковое применение — приведение в порядок излишне жирных шрифтов у Safari под «Винду» (особенно если светлый текст располагается на темной фоне). Добавляем в CSS-файл объявление
к целевому элементу, и всё становится веселей.
Действительно помогает =) Спасибо за информацию, будем знать.
P.S. Не понимаю, почему его разработчики до сих пор не могут сделать в Винде нормальный шрифт…
Раньше не встречал, заметил у вас на блоге в нумерации комментраиев, смотрится замечательно ))
У #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. текст в хедере и номера комментов клёво смотрятся.
Потому что Apple не любят винду))
жаль что данный эфеект не отрабатывает не только в эксплорере, но и в мазиле :(
Ставьте последний релиз, в нем работает.
ПРОСТО СУПЕР!!!
Спасибо, нашла то, что искала :)
{text-shadow: 2px 3px 1px #CCC, -3px 3px yellow, green 3px -3px 10px;}