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

Обсуждаем CSS-свойство text-shadow, которое пробивается в спецификации CSS и добивается браузерной поддержки с 1998 г.

Изучаем свойство 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 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

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

    4. Admin @ 30 мар 2010 г. в 17:31

    "Внутренняя тень" -- это довольно опасный (и нечасто используемый) прием. Реализация его посредством CSS вряд ли возможна. Если есть такая необходимость, проще использовать графические заголовки, отрисовав их в Фотошопе.

  • Аватар

    3. OSMan91 @ 30 мар 2010 г. в 06:56

    Вещь полезная, но... Как сделать эффект тени на самом тексте, т.е. имеется фон, допустим серого цвета, на фоне белый текст, как сделать так, чтобы тень распространялась не от текста к фону а от краев (стык текста с фоном) во внутреннюю сторону букв?.. Пример: зайдите в MS PowerPoint 2007 и создайте WordArt объект с типом заливки "Заливка - текст 1, тень внутри".

  • Аватар

    2. отто @ 11 янв 2010 г. в 21:01

    Imho, надо все-таки использовать новшества по мере их выхода. Если обходить это дело при помощи jQuery или Фотошопа, полноценной поддержки этого правильного свойства так и не дождешься!

  • Аватар

    1. demole @ 11 янв 2010 г. в 20:41

    Выглядит красиво, но смущает ограниченная поддержка браузерами. Пока что для теней выбираю Photoshop :)

Новый комментарий

Для редактирования комментария осталось 10 минут