Эффектное оформления текста с text-shadow



Использование свойства text-shadow применяется для создания теней к тексту, что выделяет текст и придает ему особый вид. Это свойство имеет параметры: цвет тени, смещение относительно надписи и радиус размытия. Применив различные настройки параметров можно получить различные эффекты для текста.


Свойство text-shadow


Свойство text-shadow

Свойство text-shadow к любому тексту элемента HTML добавляет тень. В свойствах указывают смещение по осям Х и Y, размывание и цвет тени. Можно применить несколько теней, задавая параметры через запятую.

Эффекты

Перед вами шесть эффектов винтаж/ретро, неон, вдавленный, анаглифика, огонь и фанера. Эффекты доступны только в браузерах (Safari, Chrome, Firefox), так как они поддерживают свойство text-shadow.


Винтаж/ретро


Винтаж/ретро

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Эффект винтажного текста состоит из двух теней. Первая тень того же цвета, что и фон страницы, а вторая тень того же цвета, что и сам текст. Складывается впечатление, что тень (тонкая темно-серая полоска) смещена вправо вниз.


Неон


Неон

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 теней. Основной текст залит белым цветом. Каждая из 8 теней создает все большую размытость, что дает эффект большего затемнения. Окончательный эффект получается из-за внутреннего свечения белым и внешнего свечения розовым.


Эффект вдавленности


Эффект вдавленности

text-shadow: 0px 2px 3px #666;

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


Анаглиф


Анаглиф

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Эффект напоминает старые 3D изображения. Создается он с помощью объединения применения text-shadow и RGBA. Использование RGBA позволяет задать прозрачность основному тексту и мы можем видеть сквозь него тень.


Эффект огня.


Эффект огня

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;

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


Фанера


Фанера

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

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


РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

24.05.2013