CSS3 - text-shadow
Браузеры, которые поддерживают это свойство, следующие:
- Google Сhrome. Полная поддержка, начиная с версии 2.0
- Mozilla Firefox. Полная поддержка, начиная с версии 3.1
- Opera. Полная поддержка, начиная с версии 9.5
-
Safari. Неполная поддержка с версии 1.0, с версии 4.0 - полная (добавлена поддержка нескольких теней). Вроде бы в старых версиях была проблема размытия.
Рассмотрим простейший пример.
Первое значение (1px) — смещение тени по горизонтали. Принимает положительные и отрицательные значения. При положительном значении смещает тень вправо, при отрицательном – влево.
Второе значение (2px) — смещение тени по вертикали. Принимает положительные и отрицательные значения. При положительное значении смещает тень вниз, при отрицательном – вверх.
Третье значение (3px) — размытие тени. Когда размытие не нужно, параметр можно не указывать. Параметр поддерживается не всеми браузерами.
Четвертое значение (#000) — цвет тени. Параметр также можно не указывать, и в этом случае будет использоваться цвет текста.
Выше было упомянуто о нескольких тенях. Да, одному тексту можно указывать несколько теней и делается это следующим образом.
Иными словами - наборы параметров всех теней последовательно перечисляются через запятую.
А вот теперь перейдём к практике и рассмотрим эффекты, которые можно создавать при помощи теней. Примеры будут демонстрироваться непосредственно кодом, а посему просматривать эффекты в Internet Explorer и древних браузерах не следует.
Способы применения text-shadow
Простые примеры
1) Текст сдвинут вправо и вниз на 1px.
background: #C4C4C4; color: #FF0000;
text-shadow: 1px 1px #000;
2) Текст сдвинут влево и вверх на 1px.
background: #C4C4C4; color: #FFF; text-shadow: -1px -1px #888
3) Текст сдвинут на 1px вниз
background: #C4C4C4; color: #FFF; text-shadow: 0 1px #000
4) Размытие текста и сдвиг
background: #C4C4C4; color: #FFF; text-shadow: 2px 1px 5px #000
Некоторые эффекты
5) Небольшая выразительнеость текста (тени едва заметны)
background: #666; color: #FFF; text-shadow: 0 1px 1px #000
6) Свечение текста (цвет шрифта и фона одинаковы)
background: #000; color: #FFF; text-shadow: 1px 1px 6px #FFF
background: #666; color: #FFF; text-shadow: 0 0 3px #FFF
7) Призрачный текст
background: #000; color: #000; text-shadow: 1px 1px 4px #FFF
Одинаковый цвет фона и текста
background: #fff; color: #fff; text-shadow: 1px 0 5px #000
9) Дублированный текст
background: #fff; color: #000; text-shadow: 0 20px #000
10) Неоновое свечение Его можно имитировать как с помощью одной тени, так и с помощью нескольких
background: #fff; color: #000; text-shadow: 0 0 4px #88FF77;
background: #fff; color: #000; text-shadow: 0 0 4px #FF8877, 0 0 4px #FF8877;
При желании можно ещё одну тень добавить
Использование многослойных теней
Многослойные тени не везде работают, а в Хроме ещё они немного "деревянные". Сравните, к примеру, в Опере и в Хроме и Вы поймёте о чём речь.
11) Эхо теней
background: #fff; color: #000;
text-shadow: 50px 10px 2px #4d9edb, -50px 5px 2px #0ac213, 20px -10px 2px #ff1919
12) Выпуклый текст
background: #ccc; color: #ccc;
text-shadow: -1px -1px #fff, 1px 1px #333;
13) Вогнутый текст (или выпуклый, кто как увидит)
background: #ccc; color: #ccc;
text-shadow: 1px 1px #fff, -1px -1px #333;
Выпуклый и вогнутый текст достигается путём использования светлой и тёмной теней. Есть одно существенное ограничение - на мелких размерах шрифта работает не так, как хотелось бы 
14) Контурный текст
background: #C4C4C4; color: #FFF;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000
15) Горящий текст
background: #000; color: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
Кроссбраузерный text-shadow
На jQuery был написан скрипт, который позволяет научить старые браузеры понимать эффект text-shadow. Для этого нужен jQuery, плагин и следующая последовательность действий.
Указываем на CSS тени.
Подключаем библиотеку со скриптом
<script src="/js/jquery.textshadow.js" type="text/javascript"></script>
Добавляем обработчик
// <![CDATA[
jQuery(document).ready(function(){
jQuery("p").textShadow();
})
// ]]>
</script>
Теперь у тега p будет появляться тень даже в IE. Однако всё в том же ишаке (IE6, IE7) может появляться баг - горизонтальный скролл при обработке блочных элементов. Лечится просто прописыванием display:inline, или width:99%. Первый вариант даже лучше (напоминаю про баг блоков с float-ом и padding'ом в IE6).
В общем, использовать text-shadow не только можно, но и нужно, наплевав при этом на IE. Если не плевать на него, то используем скрипт jQuery. И вот Вам 100%-я кроссбраузерность.