Текст с тенью на CSS3

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Применяемый типовой CSS-код:

text-shadow: <Смещение-X> <Смещение-Y> <Размытие>* <Цвет>*

Смещение-X: горизонтальное смещение тени по отношению к тексту. Отрицательное значение помещает тень слева от текста.

Смещение-Y: вертикальное смещение тени по отношению к тексту. Отрицательное значение помещает тень на верхней части текста.

Размытие *: установка значения размытия. По умолчанию 0, если ничего не указано.

Цвет *: установка цвета тени. Значение может быть определено либо в начале либо в самом конце кода. По умолчанию, если ничего не указано, присваивается цвет интерфейса.

Примечание: значения, отмеченные звездочками (*) являются необязательными.

Установка на сайт

1. Для любого из представленных видов тени создаём класс (для каждого свой) в разделе head или стилях CSS, например, basic:

.basic
{
text-shadow: 5px 5px 0 #CCCCCC;
}

2. В разделе body помещаем код:

<h1 class="basic">Привет, друзья!</h1>

Рассмотрим примеры и их CSS

1. Обычная тень:

Привет, друзья!

text-shadow: 5px 5px 0 #CCCCCC;

2. Размытая тень:

Привет, друзья!

text-shadow: 5px 5px 7px #959595;

3. Тень и заданный цвет текста:

Привет, друзья!

color: #ADD8E6;
text-shadow: 5px 5px 3px #414141;

4. Эффект легкого вдавливания:

Есть несколько способов для достижения такого эффекта. В данном случае определяем только смещение тени по вертикали, оставляя смещение по горизонтали X=0, а цвет тени задаём светлее, чем цвет шрифта текста.

Привет, друзья!

.inset{
text-shadow: 0 -2px 1px #8a8a8a;
}

Вот более яркий пример, сделано на темном фоне:

Привет, друзья!

background: #494949;
color: black;
text-shadow: 0 1px 2px #8a8a8a;

5. Несколько теней:

К одному элементу одновременно можно применить несколько теней, что сделает его более привлекательным. Чтобы добавить несколько текстовых теней элементу, просто отделите каждое определение тени текста запятой:

Привет, друзья!

text-shadow: 5px 5px 5px red, -5px -5px 5px orange;

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

6. 3D-тень:

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

Привет, друзья!

color: #12c911;
text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;

Обратите внимание, цвет первой тени определен черным, чтобы придать тексту приятный контур.

7. Светящиеся тени:

Вы можете создать «светящийся текст» с помощью нескольких текстовых теней. Вертикальное и горизонтальное смещение делаем нулевым, постепенно увеличиваем размытость очередной тени и выставляем цвет с каждым разом темнее. Таким образом создаём эффект «сияния»:

Привет, друзья!

background: black;
text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px 
#FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.