Создаем клевые текстовые эффекты теней с помощью text-shadow CSS3

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

И это еще не все, на что способно свойство text-shadow. С помощью него можно добавить креативности и красок, поиграть со смещением и размытием.

Вот, что получилось сделать.

Введение

Шесть текстовых эффектов: vintage/retro, neon, inset, anaglyphic, fire и board game.

Просто скопируйте готовые сниппеты в таблицу стилей и на вашем сайте и вы получите те же самые эффекты, что и в примерах. Еще раз напоминаем, что данные стили будут работать только в браузерах, поддерживающих CSS3: Safari, Chrome, Firefox.

Как работает text-shadow

Свойство CSS text-shadow используется для добавления тени любому тексто-зависимому HTML элементу. В синтаксис свойства входят: сдвиг по X (X-offset), сдвиг по Y (Y-offset), размытость (blur) и цвет тени (color).

Еще стоит отметить, что вы можете назначать элементу не одну тень, а несколько, за счет чего мы и создадим пару клевых эффектов!

Текстовый эффект винтаж/ретро (Vintage / Retro)

Как это работает:

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

Текстовый эффект неона (Neon)

Как это работает:

Эффект неона выполнен с помощью 8 теней. Устанавливаем цвет текстового элемента белым, далее назначаем каждую тень, оставляя сдвижки не тронутыми, но увеличиваем размытость теней и меняем их цвет с белого на пурпурный (за счет размытости, пурпурный стремится к цвету фона, поэтому фон может быть любого цвета). Такая смесь между белым и пурпурным создает эффект неонового свечения.

Текстовый эффект вставки

Как это работает:

Эффекты вставки или печати очень часто используются, когда хотят добавить тексту тени. Тень сдвигается по оси Y, чтобы получить эффект оттиска. На темном фоне тень должна быть светлой, а на светлом, наоборот темной.

Анаглифический текстовый эффект

Как это работает:

Анаглифический текстовый эффект воссоздает клевый эффект, используемый в старых 3D картинках. Он получен с помощью CSS, при этом использовалось и тень и RGBa. Использование RGBa на тексте и тени позволило добавить 50% прозрачность, из-за чего основной текст стал виден через тень.

Огненный текстовый эффект

Как это работает:

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

Текстовый эффект настольной игры

Как это работает:

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