Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент - text-shadow (тень текста), который на первый взгляд кажется достаточно простым, но с его помощью можно создать запоминающиеся эффекты, если подключить изобретательность и воображение.
Основы использования теней
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr , которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow , который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
Text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.
С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.
Body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }
Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.
Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!
Text-shadow: shadow1, shadow2, shadow3;
Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.
Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Смещение вниз на большое расстояние
Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.
В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.
Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);
Смещение вниз на небольшое расстояние и сильное размытие
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
3D текст от Mark Dotto
Эффект используется на сайте MarkDotto.com . В нем используется 12 различных теней для создания отличного эффекта 3D.
Text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Вдавленный текст от Gordon Hall
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
Background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Свечение
Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Множественные источники света
Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Заключение
Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.
У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow , чтобы улучшить читабельность и контрастность текста.
В приведенных примерах, мы используем тени текста в различных ситуациях, что даст вам необходимую базу, чтобы дальше вы смогли самостоятельно изучить данный вопрос.
1. Базовая настройка
Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS :
В раздел HTML добавьте тег
с классом text:
Web Code Geeks
Для этого элемента мы будем добавлять тень текста CSS. Я задал для этого элемента начальные свойства, чтобы он красиво выглядел на экране:
Теперь давайте зададим для текста атрибут text-shadow . Но сначала разберемся, какие значения принимает этот атрибут:
Text-shadow: 4px 4px 4px #ccc;
- 4px - смещение по оси X (горизонтальное );
- 3px - смещение по оси Y (вертикальное );
- 2px - значение размытия;
- #ccc - цвет.
Это задается следующим образом:
Text-shadow: horizontal-offset vertical-offset blur color;
де цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA (0,0,0,0.3); . В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:
.text {
font-size: 5em; /* делаем текст больше */
text-shadow: 4px 3px 2px #ccc;
}
Представление в браузере этого текста с тенью будет выглядеть так:
ПРИМЕР сайт
Дальше мы будем по-разному изменять цвет фона элемента body . Делаем мы это потому, что для некоторых теней CSS нужен определенный фон, иначе они не будут заметны. Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.
2. Эффект оттиска
Установите для цвета текста немного более темный оттенок, чем фон. Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:
Body {
background: #222;
}
.text {
font-size: 5em;
color: rgba(0,0,0,0.6); /* цвет текста */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* добавление тени */
}
Используя код RGBA, вы можете установить непрозрачность цвета. Обратите внимание на то, что цвет текста имеет непрозрачность 60% (0.6) , а тени div CSS 10% (0.1) .
ПРИМЕР сайт
3. Эффект ретро-тени
Для ретро-тени не всегда нужно применять размытие. Возьмем, к примеру, эту ретро-тень:
Body {
}
.text {
font-size: 5em;
color: white; /* изменяем цвет текста на белый */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* добавление ретро-тени */
}
ПРИМЕР сайт
4. Эффект двойной тени
Интересно, что вы можете добавлять более одной CSS тени шрифта. Это можно сделать следующим образом: text-shadow: shadow1, shadow2, shadow3; Давайте добавим две тени, одна - с цветом фона, а вторая немного темнее:
Text {
font-size: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* дает две тени */
}
Фон у нас белый, так что другой цвет для него нам не нужен. В браузере эффект будет выглядеть так:
ПРИМЕР сайт
5. Эффект удаленной тени
Этот эффект основывается на функции определения нескольких красивых теней CSS. Ниже вы можете увидеть эффект с четырьмя тенями, отбрасываемыми вниз с различной степенью интенсивности:
Body {
background: #fff3cd; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}
ПРИМЕР сайт
6. 3D-эффект Марка Дотто
Body {
background: #3495c0; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
Теперь посмотрите, как эти внутренние тени текста CSS выглядят в браузере:
ПРИМЕР сайт
7. Реалистичный эффект вырезанного текста Гордона Холла
Гордон использует некоторую продвинутую магию CSS, чтобы задать не только внешнюю тень, но и реалистичную внутреннюю тень:
Body {
background: #cbcbcb; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: transparent;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
И это создает эффект вырезанного текста.
ПРИМЕР сайт
8. Эффект свечения текста
body {background: #992d23; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}
Эта тень создает эффект свечения текста:
ПРИМЕР сайт
9. Эффект выпуклого текста
body {background: #629552; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
ПРИМЕР сайт
10. Эффект длинных теней
Этот эффект можно сделать с помощю
Background-color: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, 179, 60), 14px 14px rgb(131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb(131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60);
color: #eaeaea;
ПРИМЕР сайт
Заключение
Как видите, свойство text-shadow очень просто в использовании, и с его помощью вы можете создавать собственные креативные CSS тени.
Каждый веб-дизайнер хочет создавать только стоящие веб сайты, которые оценят все пользователи интернета.
Конечно, невозможно удовлетворить всем вкусам. Еще, как веб-дизайнер вы должны просто попытаться сделать все возможное, чтобы создать сайт, который понравится посетителям! К счастью, уже доступны самые мощные инструменты и ресурсы, чтобы создавать потрясающие веб-сайты и мы собрали для вас некоторые полезные фрагменты CSS, которые помогут сделать интересную фишку в ваших проектах!
Это 15 удивительных текстовых эффектов с помощью CSS3 – все подобраны и мы думаем, что они помогут добавить блеск оригинальности в ваших проектах. Некоторые из них полезны для определенных целей, а другие подходят для многократного использования.
Если вы любите цветы и вы хотите замечательный и полный цвета текста эффект, то это предложение идеальное решение для вас! Это очень подходит для отображения имени креативного агентства или для портфеля проектов. Конечно, он может быть использован для любого другого типа проектов – если вы хотите выделиться, то этот текстовый эффект-отличный выбор!
Волновой эффект действительно потрясающий! Это может использоваться, чтобы добавить немного таинственности. Было бы интересно использовать его для того, чтобы подчеркнуть скидку или специальное предложение, которое работает только в течение очень короткого периода времени.Что вы думаете?
Это очень интересный текстовый эффект; я думаю, что из-за цветовой схемы используется он может быть применен, чтобы подчеркнуть винтажный дизайн. Это умное использование теней текста и он имеет потенциал, чтобы привлечь внимание пользователей. Не забывайте, что Винтаж никогда не умрет!
Следующий текстовый эффект работает как магнит для зрителей. Вы можете использовать это, чтобы улучшить форму, чтобы подчеркнуть новый продукт, предлагаемый для продажи или просто для привлечения глазах зрителей. Это заманчивые и мудрый веб-дизайнер будет использовать его на его/ее преимущество!
Я думаю, что тенденция среди веб-дизайнеров является создание более динамичной онлайн присутствий. Прохладный скользящий эффекты и переходы страниц чаще всего используются возможности добавления больший динамизм сайт. Все же, если вы хотите еще больше динамизма, этот удивительный текст с помощью CSS3 эффект может быть хорошим вариантом. Я думаю, что это простое, но эффективное решение!
Самые требовательные клиенты-это дети, но это не должно заставить вас отказаться создании сайтов для них. Если вы работаете на малыша, связанных с проектом или смешной один, то вы можете использовать этот эффект для текста! В Jokerman шрифт имеет свою особую красоту, не так ли?
CSS3 и 3D-моделирования имеют общего больше, чем только цифра “3”! С помощью CSS3 позволяет создавать красивые 3D эффекты как один из этого фрагмента.Этот эффект подойдет для большой пул проектов и я думаю, что вы должны дать ему попробовать!
Иногда, играя с огнем может быть весело! Не волнуйся, я не пироман, я просто поражена этим прикольный текстовый эффект! Я не помню, чтобы видел этот текстовый эффект в макете других сайтов, так вот еще один повод использовать его и создать оригинальный сайт!
В ситуации, которую Вы цените больше дискретной текстовый эффект, этот “туманный эффект” - это моя рекомендация. Это правда, что он может негативно повлиять на юзабилити вашего сайта. С другой стороны, если Вы не рискуете, Вы не выиграете! Конечно, это могут быть переделаны, чтобы соответствовать Вашим требованиям!
Хотя этот текстовый эффект является довольно сложной, она реализуется с помощью CSS, нет никакого JavaScript. Лично я считаю, что он может быть использован для музыкальных сайтах или выделить определенный элемент с веб-сайта.
Это очень дискретный эффект, но я думаю, что он может добавить “Вау” эффект в макеты. Металлические выглядят чудесно создан и появляющиеся/исчезающие моменты акцентировать.
Я может быть субъективна, потому что я большой фанат "Звездных Войн" фильм, но этот текстовый эффект действительно классный. Это делает ваши проекты более интересные и, несомненно, поклонники этого фильма влюбилась в ваш сайт из-за этого эффекта.
Этот текстовый эффект существенно способствует повышению взаимодействия пользователь-сайт.Это показывает еще раз, что CSS3 имеет большой потенциал и талантливый веб-дизайнер сможет создать красивые анимации с помощью всего нескольких строк кода.
Это последний пункт из этого списка, но Вы не должны игнорировать его. Гораздо больше, Вишенка на торте, дело в том, что нет более 10 CSS3 удивительные текстовые эффекты. Я думаю, что вы должны тщательно проверять их все и изучить, как эти привлечении эффекты были реализованы.
Те, которые все еще думают, что атрибуты CSS не достаточно, чтобы создать интересные текстовые эффекты должны дать прислушаться к этому! Она сочетает в себе несколько эффектов - анимация, 3D-перспективы, теней и текстовые настройки. Я думаю, что тени и обводки сочетание-это старомодно, но этот проект создан с целью показать, чего можно достичь с помощью “чистого CSS”.
Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.
Свойства для оформления текста
1. Оформление линии: подчеркивание, обводка и зачеркивание
Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки (display: inline) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.
Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.
Рис. 1. Прерывание линии подчеркивания
1.1. Вид линии оформления: свойство text-decoration-line
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.
Свойство не наследуется.
Синтаксис
Text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; text-decoration-line: underline overline; text-decoration-line: overline underline line-through; text-decoration-line: inherit; text-decoration-line: initial;
1.2. Стиль линии оформления: свойство text-decoration-style
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе. Значения имеют то же значение, что и для свойства border-style .
Свойство не наследуется.
Синтаксис
Text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; text-decoration-style: inherit; text-decoration-style: initial;
1.3. Цвет линии оформления: свойство text-decoration-color
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-color определяет цвет линии оформления текста, установленный для элемента с text-decoration-line .
Свойство не наследуется.
Синтаксис
Text-decoration-color: currentColor; text-decoration-color: salmon; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; text-decoration-color: inherit; text-decoration-color: initial;
1.4. Краткая запись свойств линии оформления: свойство text-decoration
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration является краткой формой записи свойств text-decoration-line text-decoration-style text-decoration-color в одном объявлении. Пропущенные значения устанавливаются на их начальные значения. Значение по умолчанию text-decoration: none solid currentColor; . Свойство не наследуется. Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.
1.5. Расположение линии оформления: свойство text-underline-position
Поддержка браузерами
IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —
Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.
Свойство наследуется.
| Значения: | |
| auto | Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию. |
| under | Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right , если конкретная сторона предпочтительна в вертикальных типографских режимах. |
| left | В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under . |
| right | В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under . |
| inherit | |
| initial | |
Синтаксис
Text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
text-underline-position: under left;
text-underline-position: under right;
text-underline-position: inherit;
text-underline-position: initial;
Рис. 2. Подчеркивание текста с обеих сторон в вертикальных типографских режимах с помощью значений left и right
2. Тень текста: свойство text-shadow
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4
Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.
Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0 .
Свойство не наследуется.
Рис. 3. Синтаксис свойства text-shadow
| text-shadow | |
|---|---|
| Значения: | |
| x-offset | Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево. |
| y-offset | Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх. |
| blur | Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени. |
| цвет | Задает тени. Если цвет отсутствует, используемый цвет берется из свойства color . |
| none | Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
В отличие от box-shadow , текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow , текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.
Синтаксис
Text-shadow: 2px 2px 4px pink; text-shadow: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; text-shadow: blue 2px 5px; text-shadow: 5px 10px; text-shadow: inherit; text-shadow: initial;
2.1. Примеры тени текста
Плакатная тень
Тень текста
Text-shadow-1 { background: #77F7DE; color: white; text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white; letter-spacing: 0.1em; }
3D тень
Тень текста
Text-shadow-2 { background: linear-gradient(-45deg, #FEE864, #F5965E); color: #f4f4f4; text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4); }
Тень-текст
Тень текста
Text-shadow-3 { background: #FFE6DB; color: #FFE6DB; letter-spacing: .1em; text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1); }
