Кроссбраузерный Text-Shadow

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

Что за Text-Shadow?

Немного про то, что вообще обозначают эти два слова. Text-shadow – это свойство CSS3, которое позволяет нам поставить тень для любого текста, благодаря этому можно делать эффекты гравировки, подсветки, вдавленности и т.п.

Синтаксис

Для начала, рассмотрим синтаксис text-shadow на примере:

text-shadow: #8f8f8f -1px -2px 1px

#8f8f8f – цвет тени
-1px  -  смещение текста по оси x (горизонтали) относительно тени
-2px  -  смещение текста по оси y (вертикали) относительно тени
1px – радиус размытия тени

Интересная деталь. Можно использовать две тени, для этого нужно указывать их свойства через запятую. Выглядит это примерно так:

text-shadow: #8f8f8f -1px -2px 1px, #5fa4d6 0px 0px 10px

Где #5fa4d6 0px 0px 10px – свойства второй тени.

Кроссбраузерность

И кажется всё прекрасно, но вот незадача, поддерживают столь интересное и модное свойство далеко не все браузеры. Для наглядности табличка:

Как Internet Explorer (как обычно) и частично Safari не поддерживают столь желанную нами функцию, а значит решаем проблему.

Решение с помощью JQuery

Решение было не далеко, оказалось, достаточно всего одного плагина для JQuery под говорящим названием JQuery TextShadow. Плагин работает с библиотекой версии 1.2 и выше.

Скачать плагин можно здесь

Скачать JQuery можно на официальном сайте или можете скачать версию 1.4.1 с gblog.

Скачали? Теперь можно устанавливать.

Процесс установки

Загружаем библиотеку и плагин в корень сайт.

Подключаем jquery. Например так:

<script type="text/javascript" src="../jquery-1.4.1.js"></script>

Теперь подключаем JQuery TextShadow.

<script type="text/javascript" src="../jquery.textshadow.js"></script>

Далее вставляем этот код

<script type="text/javascript">$(document).ready(function(){$('h1').textShadow()});</script>

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

Готово. Всё установлено, можно использовать.

Пример

Демонстрацию использования вышеприведённого метода можно увидеть здесь: http://demo.gblog.pp.ru/text-shadow.html

Дополнительно

Некоторые факты, которые нужно знать при работе с text-shadow

• При использовании text-shadow с больше чем 9 тенями или радиусом размытия больше чем 100px, возможно ухудшение производительности браузера Opera
• Safari поддерживает несколько теней только после версии 4.0
• В IE есть своя замена text-shadow – Filter Shadow, но смотрится это крайне некрасиво

Вот и всё. Пользуйтесь. Успехов.