Всем привет. В этой статье хочу поговорить о, всем известным, но не всеми применяющийся в web-дизайне, CSS3 атрибуте text-shadow. На примерам я покажу, что можно делать с помощью этого параметра css. В основном это достаточно не стандартные вещи, но для оформления больших заголовков или html баннеров — не заменимая вещь. То, что 5 лет назад делали в Photoshop сейчас можно делать непосредственно в html (HTML5) и с помощью новых (относительно новых) атрибутов CSS3. Так что, изучаем, друзья, изучаем. А пока познакомимся с примерами применения Text-Shadow, но сначала познакомимся с самим атрибутом. Вот его основа:

text-shadow: 1px 2px 4px #000

где

• 1px — смещение по горизонтали
• 2px — смещение по вертикали
• 4px — масштаб размытия тени
• #000 — цвет тени (в данном случае черный)

А выглядит это так:

Тень текста

Теперь перейдем к более изощренным примерам наложения тени на текст. Здесь будет и огонь и внутренняя тень и раздвоение текста. А впрочем вы сами все можете увидеть, посмотрев «демо» файл.

Ретро-текст с помощью text-shadow

CSS:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px # 707070;

Здесь две тени: одна отвечает за контур, а другая за то, чтобы первая тень была контуром. Не поняли? Объясню чуть детальнее: Первая тень имеет смещение в 5px и по вертикали и по горизонтали, но если бы не было второй тени, то мы бы первую даже не увидели, так как цвет этой тени идентичен с фоном. Вторая тень смещается на 2px больше и имеет такой же цвет, как и сам текст. Из-за того, что первая тень закрывает вторую и получается такой интересные «Ретро-эффект»

Неоновое свечение text-shadow

CSS:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

В этом примере в одном атрибуте сразу 8 теней. Не трудно догадаться, что все построено на размытии тени и переходе с белого цвета на #ff00de

Внутренняя тень с помощью text-shadow

CSS:

text-shadow: 0px 2px 3px #666;

Очень простая, но эффектная тень. Все дело в игре цветов

Эффект раздвоения текста

CSS:

text-shadow: 8px 8px 0 RGBA (255,0,180,0.5);

Тень с применением прозрачности RGBA дает такой эффект

Горящий текст при помощи text-shadow

CSS:

text-shadow: 0 0 20px #fefcc9, 10px 30px -10px #feec85, -20px -20px 40px #ffae34, 20px 50px -40px #ec760c, -20px -60px 60px #cd4606, 0 70px -80px #973716, 10px -90px 80px #451b0e;

Текстовый эффект огня при помощи text-shadow. Как и в примере с неоном все дело в масштабе размытия тени. Правда здесь использовано семь цветов и минусовое смещение. Минусовым смещением можно сделать тень не вниз, а наверх (соответственно не вправо, а влево)

Несколько слоев в тексте при помощи CSS3 text-shadow

CSS:

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

Отличный эффект для HTML баннеров. Здесь все просто, каждая тень имеет свой цвет и выезжает на +10px дальше. Так и получается эффект «слоистости» текста

Все примеры сделаны на двух шрифтах: League-Gothic и Museo300-Regular. В кириллической версии их здесь нет, поэтому Вам придется подключить свои шрифты, чтобы сделать надписи на русском. Если появились какие-то вопросы, пиши в комментариях. Всего доброго.