Тень от текста при помощи CSS3

Для создание красивых заголовков вам больше не нужен Photoshop, теперь у вас есть CSS3, теперь к тексту можно приклеить тень при помощи маленького кусочка кода, который нужно присвоить классу вашего текста.

Какие браузеры поддерживают CSS3 тень от текста?

Правда не все так просто, не все браузеры поддерживают такую функцию. Вот вам список браузеров:

Safari 3.1 (Mac/Win) : да, но не поддерживает несколько теней
Safari 4 (Mac/Win) : да, полностью поддерживает
Opera 9.5 (Mac/Win/Lin) : да, полностью поддерживает
Firefox 2/3 (Mac/Win/Lin) : нет
Firefox 3.1/3.5 (Mac/Win/Lin) : да, полностью поддерживает
Google Chrome 1 (Win) : нет
Google Chrome 2 (Win) : да, полностью поддерживает
IE 7/8 (Win) : нет
Shiira (Mac) : да, но не поддерживает несколько теней
Konqueror (Lin/Mac/Win) : да, полностью поддерживает
iCab (Mac) : да, но не поддерживает несколько теней
Epiphany (Lin) : да, с апреля 2008
Safari на iPhone : да, но не поддерживает несколько теней
Nokia Symbian-Смартфоны (Series 60) : да
Opera Mini 4.1 : да, но нет размытости

Как CSS3 тень работает и как ее использовать?

Вот пример кода:
p { text-shadow: 1px 1px 1px #000; }

Первых два значения отвечают за длину тени. Первое значение — горизонтальное расстояние, а второе значение — вертикальное расстояние. 3-е значение — радиус рассеивания, а последнее значение — цвет тени.

Примеры теней с кодами и демонстрацией:

Я сделал несколько примеров теней, что бы показать вам возможности CSS3. Каждый пример содержит код и скриншот. При создании скриншота я использовал Safari 3.1 для того, что бы пользователи с хреновыми браузерами Internet Explorer могли увидеть сам эффект.

С этим кодом, вы получите черный текст с белым фоном и мягкой падающей тенью. Тень размещена 2 пикселя вправо и 2 пикселя влево, под текстом и имеет радиус рассеивания 3:

color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;

Или же вы можете сделать тень более четкой, проигнорировав радиус рассеивания:

color: #000;
background: #fff;
text-shadow: 2px 2px #000;

Используя отрицательные значения, вы можете сделать так, как будто источник света находится перед текстом:

color: #000;
background: #fff;
text-shadow: 2px -2px 3px #000;

Можно и по прикалываться и сделать совсем не читабельный текст:

color: #33cc33;
background: #fff;
text-shadow: 2px 2px 2px #ff3300;

Текст в стиле Apple (гравировка на металле):

Вставив небольшой код, у вас выйдет «гравировка на металле», которая часто используется в дизайне Apple. Для этого нужно использовать серый фон и очень тёмный цвет текста. А гравировка выйдет при помощи белой или светло-серой тени, которая будет размещена на 1 пиксель перед текстом. Вы можете использовать рассеивание 1, что бы немного округлить это все.

color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;

Можно попробовать сделать и на оборот — выпуклый текст:

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;

Или так:

color: #fff;
background: #666;
text-shadow: 0px 1px 1px #000;

Заставляем текст светится:

Увеличивая значение радиуса размытия, мы получаем интересный эффект. Вот вам светящийся белый текст на черном фоне:

color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;

Вы можете заставить светится весь текст, используя одинаковый цвет для текста и тени:

color: #fff;
background: #666;
text-shadow: 0px 0px 3px#fff;

Можно вытворить загадочный текст, используя одинаковый цвет для текста и заднего фона, при этом текст будет виден при помощи тени. Но помните, что делать текст и задний фон — вредно для вашего сайта, google накажет:

color: #000;
background: #000;
text-shadow: 1px 1px 4px #fff;

Можно еще так. Получится «молочный текст»:

color: #fff;
background: #fff;
text-shadow: 1px 1px 4px#000;

Дублируем текст

А вот так можно сделать копию вашего текста:

color: #000;
background: #fff;
text-shadow: 0px 20px #000;

Много теней:

Жаль, но Safari 3 не способно рендерить больше чем одну тень на одном элементе. Оно рендерит только первое значение, а остальные игнорит. Но использование мульти-теней выглядит прикольно. Следующий код будет работать только на Opera 9.5 beta, Konqueror и Safari 4:

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Вот так я поигрался с css3 text-shadow, если вы знаете еще что-нибудь, выкладывайте в комментариях.