23 Янв

CSS свойство text-shadow. Описание, применение.

Автор: admin  /  Рубрика: HTML, CSS и веб-дизайн

Свойство CSS3 text-shadow задает эффект тени тексту . Свойство достаточно эффектно при его правильном использовании.

Значения свойства задают смещение тени по X и Y, радиус тени и цвет: [цвет] [смещение тени по оси X] [смещение тени по оси Y] [радиус] или
[смещение тени по оси X] [смещение тени по оси Y] [радиус тени] [цвет]. Порядок значений строго определен. То есть необязательно указывать только цвет тени, который берется из цвета текста если не указано другое.

Можно указывать как положительные, так и отрицательные значения.

Пример: text-shadow: 1px 3px 13px red, 10px 3px 3px yellow;

Как видно из примера – можно указать несколько теней через запятую.

Поддерживается браузерами

  • Firefox 3.5 и выше
  • Opera 9.5 и выше
  • Safari 3.1 и выше
  • Chrome 2 и выше

IE напрочь не хочет принимать данное свойство, даже готовящая к выходу IE 9 – тоже не будет его поддерживать-  а это жесткий косяк от мелко мягких, ведь это свойство ввели аж в 2003 году, а может и раньше. Свойство очень красиво и эффектно смотрится, Логотип ТЕЛЕ2 (Tele2) даже без использования картинок можно сделать только с помощью данного свойства. Вдавленный, размытый, подсвеченный текст – только начало,  поэтому будем искать кросс-браузерное решение.

Кросс-браузерное решение TEXT-SHADOW

два варианта ( а точнее три):

  • с помощью фильтров ie
  • с помощью javascript (точнее jquery)
  • плюнуть на пользователей IE и сказать им что б переходили на нормальные, человеческие браузеры, и не мучали больше веб-дизайнеров.

Tags:

Оставить отзыв