(Эта страничка использует каскадные таблицы стилей CSS)
Данный документ является переводом статьи "Web Style Sheets CSS tips & tricks".
Оригинальная версия документа существует только на сайте W3C https://www.w3.org/Style/Examples/007/text-shadow.html
Данный перевод НЕ является официальным документом W3C.
Все Авторские Права Принадлежат W3C.
Данный документ может содержать ошибки перевода и опечатки.
Автор перевода: Евгений Скрипец, его новый проект Speed Lab. Все переводы автора: en, ru, uk
Локальная версия: https://www.indeep76.com/Style/Example007/text-shadow.html
Уровень 3 CSS обладает свойством 'text-shadow' для добавления тени на каждую букву любого текста. В своей простейшей форме это выглядит так:
h3 {text-shadow: 0.1em 0.1em #333}
что добавляет темно-серую (#333) тень немного вправо (0.1em) и вниз (0.1em) относительно нормального текста. Результат выглядит следующим образом:
(Еще не все браузеры августа 2005 полностью поддерживают 'text-shadow'. Данный выше пример должен работать как минимум на Safari и Konqueror.)
Простейшая форма свойства 'text-shadow' имеет две части: цвет (как #333 выше) и отступ (0.1em 0.1em в примере, данном выше). Это приводит к резкой тени на видимом отступе. Но отступ может также сделать смазанным, что приведет к более или менее смазанной тени.
Степень размытости представлена, как другой отступ. Вот две линии, одна с небольшой размытостью (0.05em) и вторая - с большей (0.2em):
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Тени можно сделать более читаемыми, если контраст между передним слоем и задним слоем небольшой. Вот пример белого текста на бледно-голубом фоне, сначала без тени, а затем с тенью:
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Без тени:
С тенью:
Вы также можете создать более, чем одну тень. В целом это выглядит довольно странно:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
Но при помощи двух правильно расположенных темной и светлой теней эффект будет полезным:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}
Это немного опасно, так как вы можете видеть, поддерживает ли ваш браузер 'text-shadow'. Фактически цвета фона и текста в этом примере практически одинаковы (#CCCCCC и #D1D1D1), так что без теней не было никакого контраста.
Пример с двумя тенями предыдущей версии можно использовать и далее. При помощи четырех теней, буквам можно задать контуры:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
Это не лучший контур, и в настоящее время (август 2005)продолжается дискуссия о том, должен ли CSS обладать отдельным свойство (или, возможно, переменную для 'text-decoration') для того, чтобы делать лучшие контуры.
Если вы помещаете смазанную тень прямо под текстом, то есть с нулевым отступом, эффект состоит в том, чтобы создать свечение вокруг букв. Если свечение одной тени недостаточно интенсивное, просто повторите такую же тень несколько раз:
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}