Свойство 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)
1 |
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070; |
Как это работает:
Винтажный стиль выполнен с помощью добавления двух теней. Первая тень того же цвета, что и фон страницы. Это нужно для того, чтобы получить эффект сдвижки текста. Именно вторая тень, со сдвигом в правый нижний угол, выполняет эту роль. Еще раз напоминаем, что первая тень должна быть по цвету фона, а вторая тень по цвету текстового элемента.
Текстовый эффект неона (Neon)
1 |
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 теней. Устанавливаем цвет текстового элемента белым, далее назначаем каждую тень, оставляя сдвижки не тронутыми, но увеличиваем размытость теней и меняем их цвет с белого на пурпурный (за счет размытости, пурпурный стремится к цвету фона, поэтому фон может быть любого цвета). Такая смесь между белым и пурпурным создает эффект неонового свечения.
Текстовый эффект вставки
1 |
text-shadow: 0px 2px 3px #666; |
Как это работает:
Эффекты вставки или печати очень часто используются, когда хотят добавить тексту тени. Тень сдвигается по оси Y, чтобы получить эффект оттиска. На темном фоне тень должна быть светлой, а на светлом, наоборот темной.
Анаглифический текстовый эффект
1 |
text-shadow: 8px 8px 0 rgba(255,0,180,0.5); |
Как это работает:
Анаглифический текстовый эффект воссоздает клевый эффект, используемый в старых 3D картинках. Он получен с помощью CSS, при этом использовалось и тень и RGBa. Использование RGBa на тексте и тени позволило добавить 50% прозрачность, из-за чего основной текст стал виден через тень.
Огненный текстовый эффект
1 |
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; |
Как это работает:
В огненном текстовом эффекте использовано несколько уровней теней. Каждая тень смещена в определенную сторону с определенным размытием и цветом. Сделано все, чтобы воссоздать эффект пламени. Преобладающие цвета: от ярко белого до желтого, оранжевые и темные тона янтаря.
Текстовый эффект настольной игры
1 |
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff; |
Как это работает:
Эффект настольной игры воссоздан очень просто. Использована группа теней с фиксированным шагом смещения в одно направление с чередующимися цветами. Все тени без размытия, чтобы точно скопировать оригинальный текст.
Супер!
Да, очень занятно. надо пробовать!