Реализуем эффект тени и вдавленности при помощи свойства text-shadow

Сегодня рассмотрим text-shadow — CSS-свойство, которое появилось еще в спецификациях к CSS 2 в далеком 1998 году, но полноценную поддержку во всех браузерах получило только недавно. Именно по этой причине text-shadow было исключено из CSS 2.1 и будет включено в CSS 3. Text-shadow позволяет получить эффект тени за текущим текстом, но перед его фоном и, несмотря на свое название, чаще используется не для «отбрасывания тени», а для имитации эффекта вдавленности. Но вначале разберемся с терминами.

Как объявляется свойство text-shadow

Объявляется text-shadow следующим образом:

p { text-shadow: 1px 0 0 #000; }

Рассмотрим параметры свойства по порядку:

• смещение по оси X
• смещение по оси Y
• радиус размытия (опция)
• цвет тени

Множественные тени также возможны:

p { text-shadow:1px 1px 1px #000, 3px 3px 5px #0f0; }

Положительные значения дают отброс тени вправо и вниз соответственно. Отрицательные — влево и вверх.

Кроме этого, возможен вариант использования RGBA-значений для цвета:

p { text-shadow:0 2px 2px rgba(255, 255, 255, 0.4); }

Поддержка браузерами

Safari 1.1 в 2003 г. стал первым браузером, в котором было реализовано это свойство (правда частично — без размытия). Поддержали инициативу только Konqueror 3.4 в 2006 году и, совсем недавно, Opera 9.5 и iCab. В любимом всеми Firefox 2 и 3.0.x теней вы не увидите. Только Firefox 3.1 prealpha полностью поддерживает text-shadow.

Несмотря на то, что Chrome, как и Safari, использует движок WebKit, из-за использования в нем для графического рендеринга движка Skia, тени доступны только в Chrome 2.

Internet Explorer 7 и 8 text-shadow не поддерживают никак.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.