Свойство text-shadow не новое для CSS-3, оно было введено еще в CSS-2, однако браузеры начали учитывать его только в последнее время. Как следует из названия, свойство text-shadow позволяет создавать тень для текста при помощи CSS. Ниже приводится синтаксис text-shadow.

Первое значение определяет смещение тени по оси X, т. е. по горизонтали. Если значение положительное, оно определяет смещение тени справа от текста, при отрицательном значении, смещение тени влево от текста. Точно также, второе положительное значение определяет смещение по оси Y (по вертикале), положительное значение определяет смещение ниже текста, отрицательное создает расстояние выше текста.

Третье положительно значение, определяет радиус размытия тени. Если значение не указанно, то размытия не будет.

Создание текстовых эффектов при помощи свойства text-shadow.

При помощи свойства text-shadow можно сделать некоторые текстовые эффекты, которые раньше можно было сделать только при помощи фотошопа или другого графического редактора. Чтобы получить общее представление о том, как можно использовать text-shadow, ниже рассмотрим некоторые примеры.
1. Простая тень для текста на CSS.

Это простой пример использования свойства text-shadow. В нем создана тень 2px по оси X и оси Y, а также радиус размытия 2px.

2. Стиль выгравированного текста.

В данном случае указано только вертикальное смещение, без размытия.

3. Светящийся текстовый эффект.

Светящийся эффект можно сделать добавив только радиус размытия.

4. Размытый текст.

В приведенном ниже примере все сделано аналогично предыдущему, т. е. указан только радиус размытия без горизонтально или вертикально смещения. Однако в этом примере, использовалось значение цвета transparent, которое указывает, что цвет фона должен быть прозрачным. Это дает эффект размытия.

5. Использование нескольких теней.

Можно указать несколько теней для текста, разделяя значения запятыми. Пример использования нескольких теней:

6. Рельефный текст.

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

7. Граница вокруг текста.

Следующий код создает эффект границы для текста.

text-shadow: 0 -1px #00468C,

1px 0 #00468C,

0 1px #00468C,

-1px 0 #00468C;

8. Текст в стиле 3D.

3D эффект для текста, может быть создан с использованием нескольких теней. Для достижения эффекта каждая тень немного увеличивается с использованием одного и того же цвета.

Переводчик: Белевич Андрей
Материал подготовлен сайтом: WebMasterMix.ru
Источник
Источник2