Как сделать текст с тенью на CSS

Многие веб-дизайнеры при создании макета сайта, любят задавать для текста различные эффекты, такие как текстовая тень. Потому что это очень сильно улучшает внешний вид сайта. Верстальщикам же, для реализации текста с тень, раньше приходилось этот текст растрировать и использовать на сайте в виде обычного изображения.

Но с приходом CSS3 все кардинально изменилось. Теперь появилось новое свойство text-shadow, с помощью которого можно задавать тень для текста.

Данное свойство записывается так:

text-shadow: 4px 4px 0 #ccc;
  • Первое значение, задает сдвиг тени по оси x.
  • Второе значение, задает сдвиг по оси y.
  • Третье значение, задает радиус размытия тени.
  • Четвертое значение, устанавливает цвет тени.

Более подробно об этом свойстве, я рассказываю в данном видеоуроке.

Смотреть видеоурок

К сожалению, на данный момент, text-shadow не является кроссбраузерным. К примеру, IE9 и более младшие версии не поддерживают его.

Вместо text-shadow, в данных браузерах используют:

filter: Shadow(Color=#ccc, Direction=45, Strength=4);

Указанный вверху код, задает тень цвета (#ccc), направление тени (45 градусов от вертикали) и размер смещения (4px).

Добавить комментарий