Внутренняя тень css текста: Внутренние тени в CSS / Хабр

Содержание

Текст и тень | htmlbook.ru

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

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

К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.

Контурный текст

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: 2em Arial, sans-serif;
    text-shadow: red 0 0 2px;
   }
  </style>
 </head>
 <body>
   <p>Контурный текст</p>
 </body>
</html>

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: 2em Arial, sans-serif;
    text-shadow: red 1px 1px 0, red -1px -1px 0, 
                 red -1px 1px 0, red 1px -1px 0;
   }
  </style>
 </head>
 <body>
  <p>Контурный текст</p>
 </body>
</html>

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: bold 3em Arial, sans-serif;
    color: #0d3967;
    text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, 
                 #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, 
                 #cad5e2 5px 5px 0;
   }
  </style>
 </head>
 <body>
  <h2>Десятикамерный холодильник</h2>
 </body>
</html>

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   body {
    background: #f0f0f0; /* Цвет фона веб-страницы */
   }
   .stroke {
    font: bold 3em Arial, sans-serif;
    color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
    text-shadow: #fff -1px -1px 0, 
                 #333 1px 1px 0;
   }
  </style>
 </head>
 <body>
  <h2>Рельефный текст</h2>
 </body>
</html>

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

 text-shadow: #333 -1px -1px 0, 
              #fff 1px 1px 0;

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .light {
    text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
    color: #0083bd;
   }
   .dark {
    text-shadow: red 0 0 10px; /* Свечение красного цвета */
   }
  </style>
 </head>
 <body>
  <h2>Светлая сторона</h2>
  <h2>Тёмная сторона</h2>
 </body>
</html>

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .blur {
    text-shadow: #000 0 0 5px;
    color: transparent; /* Прозрачный цвет текста */
   }
  </style>
 </head>
 <body>
  <h2>Нерезкий текст</h2>
 </body>
</html>

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   a:hover { /* Вид ссылки при наведении на неё курсора */
    text-shadow: #5dc8e5 0 0 5px;
    color: #000;
   }
   p:first-letter { /* Первая буква абзаца */
    font-size: 2em;
    text-shadow: red 1px 1px 0, red -1px -1px 0, 
                 red -1px 1px 0, red 1px -1px 0;
   }
  </style>
 </head>
  <body>
   <p>Нишевый проект тормозит <a href="1.html">традиционный канал</a>, не считаясь с 
      затратами. Структура рынка, отбрасывая подробности, стабилизирует 
      департамент маркетинга и продаж, используя опыт предыдущих кампаний. 
      Построение бренда, безусловно, спонтанно отталкивает конвергентный 
      PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой 
      социальный статус, повышая конкуренцию. Торговая марка естественно 
      обуславливает план размещения, используя опыт предыдущих кампаний.</p>
 </body>
</html>

текст с тенью. Несколько теней текста — учебник CSS

Еще один способ украсить веб-страницу – сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста. Вы можете настроить цвет тени, ее смещение и размытие.

Задать в CSS тень текста можно с помощью свойства text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini – этот браузер лишь частично поддерживает свойство. Ниже показан пример записи стиля и значений свойства:


h2 {
	text-shadow: 3px 5px 6px #6C9;
}

Как видно, мы указали целых четыре значения через пробел. Пройдемся по порядку:

3px – первое значение отвечает за смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево.
5px – второе значение отвечает за смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх.
6px – третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.
#6c9 – четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.

Как выглядит тень в браузере (скриншот):

Скриншот: текст с тенью, CSS

Несколько теней CSS для текста

Также допускается использовать несколько групп значений для свойства text-shadow. Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.

Пример:


h2 {
text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7;
}

Результат применения такого стиля виден на скриншоте:

Скриншот: несколько теней для текста CSS

С помощью свойства CSS text-shadow можно создавать действительно красивые вещи. Вы можете экспериментировать: устанавливать большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для настройки прозрачности. Вот что может получиться, если уделить этому свойству достаточное количество внимания:

Скриншот: объемная тень текста в CSS

Далее в учебнике: как задать интервалы в CSS между символами, словами и строками.

Тень блока (свойство box-shadow) | CSS — Примеры

box-shadow generator

Свойство box-shadow (w3.org) создаёт элементу тень.

Как создать объёмный HTML элемент из нескольких box-shadow

box-shadow может иметь сколько угодно значений. Поэтому им можно заменить картинки форматов JPEG, PNG и даже GIF [инструмент lvivski.com]. Можно, но не нужно. А вот создание объёма может быть полезным для того, чтобы смастерить, например, объёмную красивую кнопку.

цвет одной стороны

цвет другой стороны

толщина тени


<div></div>

Эффект тени блока

Тень вокруг div CSS

Хм, отбрасывает ли предмет тень, когда свет на него падает сверху? Да, если предмет удалён от поверхности. Чем дальше, тем интенсивнее тень. Сама проверяла, светя фонариком.

CSS тень с одной стороны

Снизу (под блоком div)

По бокам (справа и слева)

Многослойный блок с помощью box-shadow

Разноцветная CSS рамка

Еще варианты можно посмотреть у css.yoksel.ru.

CSS внутренняя тень блока (внутри элемента)

Как сделать вдавленный элемент

Как сделать выпуклый элемент с округлыми краями

box-shadow inset и картинка img

Понадобится статья «Как убрать отступ под изображением»

<span><img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg"/></span>

box-shadow и HTML тег input

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

<input type="text" placeholder="псевдоним или email"/>
<input type="password" placeholder="пароль">

Или подсветка внутри input (получилась красивая форма входа CSS):

<input type="text" placeholder="псевдоним или email"/>
<input type="password" placeholder="пароль">

box-shadow и transition или animation

box-shadow можно плавно изменять, но нужно учитывать особенность этого изменения:

? нет да

<span>да</span>
<span>нет</span>
<span>да</span>

Продолжение следует: box-shadow и :before и :after.

text-shadow — Веб-технологии для разработчиков

CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations. Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон https://github.com/mdn/interactive-examples и пришлите нам запрос на извлечение (pull request).

Syntax

/* смещение-x | смещение-y | радиус-размытия | цвет */
text-shadow: 1px 1px 2px black; 

/* цвет | смещение-x | смещение-y | радиус-размытия */
text-shadow: #fc0 1px 0 10px; 

/* смещение-x | смещение-y | цвет */
text-shadow: 5px 5px #558abb;

/* цвет | смещение-x | смещение-y */
text-shadow: white 2px 5px;

/* смещение-x | смещение-y
/* Используем значения по умолчанию для цвета и радиуса-размытия */
text-shadow: 5px 10px;

/* Значения принятые глобально */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Это свойство определено как разделённый запятыми список теней.

Каждая тень определена как два или три значения <длина>, за которыми следует необязательное значение <цвет>. Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y>. Третье необязательное значение <длина> задаёт <радиус-размытия>. Значение <цвет> определяет цвет тени.

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

Это свойство можно применить к псевдо-элементам ::first-line и ::first-letter.

Значения

<цвет>: Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется опредлить значение цвета явно.
<смещение-x> <смещение-y>: Обязательные. Эти величины <длина> задают расстояние тени от текста. <смещение-x> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <смещение-y> определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в 0, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <радиус-размытия>.
<радиус-размытия>: Необязательный. Это величина <длина>. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0, в случае когда параметр не определён.

Формальный синтаксис

none | <shadow-t>#где 
<shadow-t> = [ <length>{2,3} && <color>? ]
где 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
где 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Примеры

Простая тень

.red-text-shadow {
  text-shadow: red 0 -2px;
}

<p>Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Множественные тени

.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}

<p>Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

Спецификации

Совместимость с браузерами

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`text-shadow`	Chrome Полная поддержка 2	Edge Полная поддержка 12	Firefox Полная поддержка 3.5 Полная поддержка 3.5 Замечания Firefox versions before 57 have a bug whereby `transition`s will not work when transitioning from a `text-shadow` with a color specified to a `text-shadow` without a color specified (bug 726550). Замечания From Firefox 4, the blur radius is capped at 300 for performance reasons. Замечания Firefox theoretically supports infinite text-shadows (don’t try it). Замечания If the `<color>` value is unspecified, then Firefox uses the value of the element’s `color` property.	IE Полная поддержка 10	Opera Полная поддержка 9.5 Полная поддержка 9.5 Замечания Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px. Замечания Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom).	Safari Полная поддержка 1.1 Полная поддержка 1.1 Замечания In Safari, any shadows that do not explicitly specify a color are transparent. Замечания Safari 1.1 to 3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows.	WebView Android Полная поддержка 37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4 Полная поддержка 4 Замечания Firefox versions before 57 have a bug whereby `transition`s will not work when transitioning from a `text-shadow` with a color specified to a `text-shadow` without a color specified (bug 726550). Замечания From Firefox 4, the blur radius is capped at 300 for performance reasons. Замечания Firefox theoretically supports infinite text-shadows (don’t try it). Замечания If the `<color>` value is unspecified, then Firefox uses the value of the element’s `color` property.	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1 Полная поддержка 1 Замечания In Safari, any shadows that do not explicitly specify a color are transparent. Замечания Safari iOS 1 and 2 only support one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari iOS 3 (WebKit 528) and later support multiple text-shadows.	Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка: Полная поддержка
Смотрите замечания реализации.: Смотрите замечания реализации.

Примечание Quantum CSS

В движке Gecko есть программная ошибка в результате которой метод перехода (transition) не будет производить переход от элемента со свойством text-shadow с заданным цветом к элементу со свойством text-shadow без заданного цвета (баг 726550). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).

Также смотрите

Свойство text-shadow | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-shadow добавляет тень к тексту. Допускается добавление нескольких теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделенных запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Поддержка браузерами

CSS синтаксис:

text-shadow:"h-shadow (горизонтальная тень) v-shadow (вертикальная тень) blur-radius (радиус размытия) color (цвет) | none | initial | inherit";

JavaScript синтаксис:

object.style.textShadow = "5px 5px 5px orange"

Значения свойства

Значение	Описание
none	Тень у элемента отсутствует. Это значение по умолчанию.
h-shadow	Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
v-shadow	Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
blur-radius	Необязательное значение. Задаёт радиус размытия. По умолчанию значение 0.
color	Необязательное значение. Задаёт цвет тени (Имя цвета \| HEX \| RGB(A) \| HSL(A). Значением по умолчанию является черный цвет.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Да.

Анимируемое

Да.

Пример использования

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент <p>):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-shadow в CSS</title>
<style> 
p {
color: #fff; /* устанавливаем цвет текста белый*/	
text-shadow: 1px 1px 4px #000; /* размещаем текстовую тень*/	
} 
p::selection { /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: 1px 1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
p::-moz-selection { /* описание псевдоэлемента для браузера Firefox (дублируем стили) */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: -1px -1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
</style>
</head>
	<body>
		<p>Текст с добавленной тенью.</p>
		<p>Текст с добавленной тенью.</p>
	</body>
</html>

В этом примере мы для всех азацев (элемент <p>) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.

Результат нашего примера:

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

Множественная текстовая тень

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Пример блока объявлений для множественной тени:

.multipleShadow {
text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */	
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример создания множественной текстовой тени</title>
<style> 
.test {
text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */
line-height: 150px; /* зад

Свойство text-shadow — тень текста

Свойство text-shadow задает тень тексту. В качестве значения свойство принимает 4 параметра, перечисляемые через пробел, либо ключевое слово none, отменяющее тень совсем (это значение по умолчанию).

Синтаксис

селектор { text-shadow: сдвиг_по_x сдвиг_по_y размытие цвет; }

селектор { text-shadow: none; }

Параметры

Параметр	Описание
сдвиг по x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой.
цвет	Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям и размытие задаются в любых единицах для размеров, кроме процентов.

Пример

Давайте сдвинем тень вниз и влево и добавим небольшое размытие:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-shadow: 5px 5px 3px black; }

Пример . Четкая тень

А теперь сделаем тень красного цвета, сдвинем ее вниз и влево, но уберем размытие — тень будет четкой:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-shadow: 10px 10px red; }

Пример . Равномерная тень

Сейчас тень не сдвинута, но к ней добавлено размытие:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-shadow: 0px 0px 3px black; }

Смотрите также

свойство box-shadow,
которое задает тень контейнеру

Свойство text-shadow / Хабр

Совсем недавно увидел пост про свойство z-index. Раз пошла такая пьянка, то вставлю и свои пять копеек и расскажу о свойстве text-shadow. Так получилось, что в последнее время мне стали регулярно попадаться сайты, использующие это свойство. Сразу скажу, что под IE любой версии (и IE8 тоже!) читать статью не имеет смысла, так как ослик, к большому сожалению, так и не научился поддерживать свойство, которое было описано еще в 1998 году.

Примечание: Так как Хабр не позволяет в статьях использовать собственные стили, то живые примеры можно смотреть на моей странице.

Итак, в CSS имеется свойство text-shadow для добавления тени на каждую букву текста. На данный момент из современных браузер только IE не поддерживает этот стиль. Само свойство было представлено еще в CSS2, но практически не поддерживалось браузерами. Постепенно ситуация стала менятья к лучшему. На данный момент таблица поддержки браузерами выглядит следующим образом

Safari 3.1 (Mac/Win)	да, но без множественных теней
Safari 4 (Mac/Win)	да, полная поддержка
Opera 9.5 (Mac/Win/Lin)	да, полная поддержка
Firefox 2/3 (Mac/Win/Lin)	нет
Firefox 3.1/3.5 (Mac/Win/Lin)	да, полная поддержка
Google Chrome 1 (Win)	нет
Google Chrome 2 (Win)	да, полная поддержка
IE 7/8 (Win)	нет
Konqueror (Lin/Mac/Win)	да, полная поддержка
Safari on iPhone	да, но без множественных теней
Nokia Symbian-Smartphones (Series 60)	да
Opera Mini 4.1	да, но без размытия

Как видите, последние версии современных браузеров поддерживают text-shadow. Даже мобильные версии браузеров уже понимают это свойство, хотя и с некоторыми ограничениями.

Свойство text-shadow хорошо тем, что позволяет создавать интересные эффекты с текстом без необходимости пользоваться изображениями. А значит текст доступен поисковикам, легок для страницы и т.д.

Самый простой пример использования данного стиля выглядит следующим образом.

 
h3.shadow
{
    text-shadow: 2px 2px 1px red;
}

В этом примере мы добавляем к заголовку 2 уровня красную тень, которая отбрасывается немного вправо и вниз относительно самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать тень размытой. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет тени должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх). Кстати, браузеры на движке WebKit поддерживают цвет в формате rgba, что позволяет использовать полупрозрачность.

 
h3.blurshadow
{
    text-shadow: 0.1em 0.1em 0.2em red;
}

Заголовок с размытой тенью

На основе этого свойства можно добиться интересных эффектов на странице сайта. Например, использование тени позволяет сделать текст более читаемым, если контраст между символами и фоном небольшой. Сравните два варианта белого текста на бледно-голубом фоне.

 
lightback {background-color: #F0F8FF}
.whitetext {color: white}
.whitetext-shadow {color: white; text-shadow: black 0.1em 0.1em 0.2em}

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

Многослойные тени

У свойства text-shadow есть одна интересная особенность — вы можете создавать более чем одну тень. На первый взгляд это кажется необычным, но пользователи, работающие с графикой, знакомы с техникой создания объемных букв (вдавленных или выпуклых) при помощи нескольких теней.

Создадим на сером фоне два варинта объемного текста.

 
.ThreeD
{
    background: #CCC;
}
 
.a
{
    color: #D1D1D1;
    text-shadow: -1px -1px white, 1px 1px #333;
    font-size: 24pt;
}
 
.b 
{
    color: #D1D1D1;
    text-shadow: 1px 1px white, -1px -1px #333;
    font-size: 24pt;
}

Выпуклый текст
Вдавленный текст

Впрочем, нужно быть осторожным в использовании этих эффектов, так как не все браузеры поддерживают несколько теней. Например, Opera поддерживает до шести теней, а Firefox только одну (только первую, а остальные игнорирует).

Контуры

Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.

 
p.contur
{
    background: #CCF; 
    padding: 1em;
}
 
.conturtext
{
    font-size: 24pt;
    color: #BBE; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Неоновое свечение

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

 
.neon 
{
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F
}

Использование сценариев JavaScript

Также вы можете использовать свойство text-shadow в сценариях JavaScript. Я не уверен, что на Хабре можно использовать сценарии, поэтому примеры можно посмотреть на моей странице.

Подводя итоги

Учитывая тот факт, что IE не поддерживает свойство text-shadow, многие посчитают его недостойным внимания. Но с другой стороны, пользователи IE не получат ошибку при отображении страницы. Они увидят обычный плоский текст, и когда им скажут, что под другим браузером страница выглядит покруче, то может это заставит их задуматься о смене браузера, а разработчиков M$ заставит призадуматься.

Дополнительная информация

В заключение приведу несколько ссылок для дополнительной информации.
Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.
Stylish text with the CSS text-shadow property (несколько примеров, в т.ч. пример огненного текста).
CSS Text-Shadow in Safari, Opera, Firefox and more — несколько интересных примеров.
Text-Shadow Exposed: Make cool and clever text effects with css text-shadow — еще несколько примеров
Несколько примеров на русском

text-shadow — Веб-технологии для разработчиков

CSS-свойство text-shadow Цвет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам украшения . Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста, создайте клон https: // github.com / mdn / interactive-examples и пришлите нам запрос на извлечение (pull request).

Синтаксис

 / * смещение-x | смещение-y | радиус-размытия | цвет * /
тень текста: 1px 1px 2px черный;

/ * цвет | смещение-x | смещение-y | радиус-размытия * /
тень текста: # fc0 1px 0 10px;

/ * смещение-x | смещение-y | цвет * /
тень текста: 5px 5px # 558abb;

/ * цвет | смещение-x | смещение-y * /
тень текста: белый 2px 5px;

/ * смещение-x | смещение-y
/ * Используем значения по умолчанию для цвета и радиуса-размытия * /
тень текста: 5 пикселей 10 пикселей;

/ * Значения принятые глобально * /
текстовая тень: наследовать;
текстовая тень: начальная;
тень текста: не задано;

Это свойство определено как разделённый запятыми список теней.

Каждая тень определена как два или три значения <длина> , за это следует необязательное значение <цвет> . Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y> . Третье необязательное значение <длина> задаёт <радиус-размытия> . Значение <цвет> определяет цвет тени.

«Пробная перспектива» в области видимости.

Это свойство можно применить к псевдо-элементм :: первая строка и :: первая буква .

Значения

<цвет>: Необязательный. Цвет тени. Параметр может быть определен как до, так и после значений смещений. Если это значение не задано, то его цвет будет определяться браузером пользователя, поэтому для согласованности в отображении в браузерах рекомендуется опредлить значение цвета явно.
<смещение-x> <смещение-y>: Обязательные.Эти величины <длина> задают расстояние тени от текста. <смещение-x> определяет горизонтальное расстояние; отрицательное значение размещает тень левее отательное текст. <смещение-y> определить вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в 0 , тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <радиус размытия> .
<радиус-размытия>: Необязательный.Это величина <длина> . Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0 , в случае когда параметр не установлен.

Формальный синтаксис

 нет | <тень-t> #  где 
  <тень-t> = [<длина> {2,3} && <цвет>? ]  
  где 
  <цвет> =  |  |  |  |  | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
  где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
  где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> | <угол>

Примеры

Простая тень

.red-text-shadow {
  text-shadow: красный 0 -2px;
}

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventory.

Множественные тени

 .white-text-with-blue-shadow {
  тень текста: 1px 1px 2px черный, 0 0 1em синий, 0 0 0.2em синий;
  цвет белый;
  шрифт: 1.5em Georgia, с засечками;
}

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, Totam rem aperiam, eaque ipsa quae ab illo Inventore.

Спецификации

Совместимость с браузерами

Таблица совместимости на этой странице была сформирована из структурированных данных. Если Вы хотите внести вклад в эти данные, сверьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение (pull request). Обновите данные о совместимости на GitHub для Android 9013 Android 9013 Chrome для Android 907 Chrome для Android 907 Chrome для Android 907 Chrome для Android 901 для Android

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Opera для Android	Safari на iOS	Samsung Internet
`text-shadow`	Chrome Полная поддержка 2	Кромка Полная поддержка 12	Firefox Полная поддержка 3.5 Полная поддержка 3.5 Замечания В версиях Firefox до 57 есть ошибка, из-за которой `transition` s не будет работать при переходе от `text-shadow` с указанным цветом к `text-shadow` без указания цвета (ошибка 726550). Замечания Начиная с Firefox 4, радиус размытия ограничен 300 из соображений производительности. Замечания Firefox теоретически поддерживает бесконечные текстовые тени (не пробуйте). Замечания Если значение не задано, Firefox использует значение свойства `color` элемента.	IE Полная поддержка 10	Опера Полная поддержка 9,5 Полная поддержка 9,5 Замечания Opera поддерживает максимум 6-9 теней для текста по соображениям производительности.Радиус размытия ограничен 100 пикселями. Замечания Opera 9.5–10.1 придерживается старого обратного порядка рисования (в CSS2 первая указанная тень находится внизу).	Safari Полная поддержка 1,1 Полная поддержка 1.1 Замечания В Safari все тени, для которых явно не указан цвет, прозрачны. Замечания Safari 1.1–3.2 поддерживает только одну тень текста (отображает первую тень списка, разделенного запятыми, и игнорирует остальные). Safari 4.0 (WebKit 528) и более поздние версии поддерживают несколько текстовых теней.	WebView Android Полная поддержка 37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4 Полная поддержка 4 Замечания В версиях Firefox до 57 есть ошибка, из-за которой `transition` s не будет работать при переходе от `text-shadow` с указанным цветом к `text-shadow` без указания цвета (ошибка 726550). Замечания Начиная с Firefox 4, радиус размытия ограничен 300 из соображений производительности. Замечания Firefox теоретически поддерживает бесконечные текстовые тени (не пробуйте). Замечания Если значение не задано, Firefox использует значение свойства `color` элемента.	Opera Android Полная поддержка 14	Safari iOS Полная поддержка 1 Полная поддержка 1 Замечания В Safari все тени, для которых явно не указан цвет, являются прозрачными. Замечания Safari iOS 1 и 2 поддерживают только одну тень текста (отображает первую тень списка, разделенного запятыми, и игнорирует остальные). Safari iOS 3 (WebKit 528) и более поздние версии поддерживают несколько текстовых теней.	Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка: Полная поддержка
Смотрите замечания реализации.: Смотрите замечания реализации.

Примечание Quantum CSS

В движке Gecko есть программная ошибка в результате метода перехода ( transition ) text-shadow с заданным цветом к элементу со своим text-shadow без заданного цвета (баг 726550) . Данная ошибка исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).

Также смотрите

Свойство text-shadow / Хабр

Совсем недавно увидел пост про свойство z-index. Раз пошла такая пьянка, то вставлю и свои пять копеек и расскажу о своемстве text-shadow. Так получилось, что в последнее время мне стали регулярно попадаться сайты, использующие это свойство. Сразу скажу, что под IE любой версии (и IE8 тоже!) Читать статью не имеет смысла, так как ослик, к большому сожалению, так и не научился поддерживать свойство, которое было описано еще в 1998 году.

Примечание: Так как Хабр не позволяет создать собственные стили, то живые примеры можно смотреть на моей странице.

Итак, в CSS имеется свойство text-shadow для добавления тени на каждую букву текста. На данный момент из современного браузера только IE не поддерживает этот стиль. Само свойство было представлено еще в CSS2, но практически не поддерживалось браузерами. Постепенно ситуация стала менятья к лучшему. На данный момент таблица поддерживает браузерами следующим образом

Safari 3.1 (Mac / Win)	да, но без множественных теней
Safari 4 (Mac / Win)	да, полная поддержка
Опера 9.5 (Mac / Win / Lin)	да, полная поддержка
Firefox 2/3 (Mac / Win / Lin)	нет
Firefox 3.1 / 3.5 (Mac / Win / Lin)	да, полная поддержка
Google Chrome 1 (Win)	нет
Google Chrome 2 (Win)	да, полная поддержка
IE 7/8 (Win)	нет
Konqueror (Lin / Mac / Win)	да, полная поддержка
Safari на iPhone	да, но без множественных теней
Nokia Symbian-смартфоны (Series 60)	да
Opera Mini 4.1	да, но без размытия

Как видите, последние версии современных браузеров браузер text-shadow . Даже мобильные версии браузеров уже понимают это свойство, хотя и с некоторыми ограничениями.

Самый простой пример использования данного стиля выглядит следующим образом.

h3.shadow
{
    тень текста: 2px 2px 1px красный;
}

В этом примере мы добавляем к заголовку 2 уровня красную тень, которая отбрасывается немного вправо и вниз самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать размытую. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх).Кстати, браузеры на движке WebKit поддерживает цвет в формате rgba, что позволяет использовать полупрозрачность.

h3.blurshadow
{
    тень текста: 0,1 мкм 0,1 мкм 0,2 мкм красный;
}

Заголовок с размытой тенью

На основе этого свойства можно создать интересные эффекты на странице сайта. Например, использование тени позволяет сделать текст более читаемым, если контраст между символами и фоном небольшой. Выберите два варианта белого текста на бледно-голубом фоне.

светлый {background-color: # F0F8FF}
.whitetext {color: white}
.whitetext-shadow {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}

Если вы посмотрите на пример, то первую строчку практически разглядеть, а текст с тенью на второй строчке хорошо читается.

Многослойные тени

У свойств text-shadow есть одна интересная особенность — вы можете создать более чем одну тень. На первый взгляд это кажется необычным, но пользователи, работающие с графикой, знакомы с техникой создания объемных букв (вдавленных или выпуклых) при помощи нескольких теней.

Создадим на сером фоне два варинта объемного текста.

.ThreeD
{
    фон: #CCC;
}
 
.a
{
    цвет: # D1D1D1;
    text-shadow: -1px -1px белый, 1px 1px # 333;
    размер шрифта: 24pt;
}
 
.b
{
    цвет: # D1D1D1;
    text-shadow: 1px 1px белый, -1px -1px # 333;
    размер шрифта: 24pt;
}

Выпуклый текст
Вдавленный текст

Впрочем, нужно быть осторожным в использовании этих эффектов, так как не все браузеры несколько теней. Например, Opera поддерживает до шести теней, а Firefox только одну (только первую, а остальные игнорирует).

Контуры

Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.

p.contur
{
    фон: #CCF;
    отступ: 1em;
}
 
.conturtext
{
    размер шрифта: 24pt;
    цвет: #BBE;
    text-shadow: -1px 0 черный, 0 1px черный, 1px 0 черный, 0 -1px черный;
}

Неоновое свечение

Если создать тень без объекта и размыть ее, то получим эффект неонового свечения.

.neon
{
    тень текста: 0 0 0.2em # 87F, 0 0 0,2em # 87F, 0 0 0,2em # 87F
}

Использование сценариев JavaScript

Также вы можете использовать свойство text-shadow в сценариях JavaScript. Я не уверен, что на Хабре можно использовать сценарии, поэтому можно посмотреть на моей странице.

Подводя итоги

Учитывая тот факт, что IE не поддерживает свойство text-shadow , многие посчитают его недостойным вниманием. Но с другой стороны, пользователи IE не получат ошибку при отображении страницы.Они увидят обычный плоский текст, и когда они заставят их задуматься о смене, а разработчики M $ заставит призадуматься.

Дополнительная информация

В заключение приведу несколько ссылок для дополнительной информации.
Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.
Стильный текст со свойством CSS text-shadow (несколько примеров, в т.ч. пример огненного текста).
CSS Text-Shadow в Safari, Opera, Firefox и др. — несколько интересных примеров.
Text-Shadow Exposed: Создавайте крутые и умные текстовые эффекты с помощью css text-shadow — еще несколько примеров
Несколько примеров на русском.

Текст и тень | htmlbook.ru

Одно время на текст с тенью была индуцирована особая мода и подобный можно было встретить практически на любом сайте. В графическом редакторе добавляется просто, отлично, вот текст с тенью и пихали на веб-странице независимо от стиля сайта и чувства мерыера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, которых мало кто подозревает.С помощью этого можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

Рис. 1. Параметры text-shadow

Цвета писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba.Положительные значения с ущерба «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения с ущерба. Радиус размытия устанавливает, насколько будет резкой. Чем больше размытия, тем мягче выглядит тень.

Большим плюсом text-shadow позволяет добавить сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере никаких красивостей не увидим.

Контурный текст

Контурный текст характерен, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами.В первом методе устанавливаем нулевое смещение тени и небольшой радиус размытия, прямо, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   .инсульт {
    шрифт: 2em Arial, без засечек;
    text-shadow: красный 0 0 2px;
   }
  
 
 
    Контурный текст

Контур, сделанный этим методом, использован на рис.1. Контур слегка размытым, специально для тех, кто хочет получить чёткую линию, предназначенную второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   .инсульт {
    шрифт: 2em Arial, без засечек;
    text-shadow: красный 1px 1px 0, красный -1px -1px 0,
                 красный -1px 1px 0, красный 1px -1px 0;
   }
  
 
 
   Контурный текст

Вид такой контура показан на рис.3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 имеют одновременно несколько теней, которые смещены относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В программе 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   .инсульт {
    шрифт: жирный 3em Arial, без засечек;
    цвет: # 0d3967;
    текст-тень: # cad5e2 1px 1px 0, # cad5e2 2px 2px 0,
                 # cad5e2 3px 3px 0, # cad5e2 4px 4px 0,
                 # cad5e2 5px 5px 0;
   }
  
 
 
    Десятикамерный холодильник

Для всех теней ставим нулевой радиус размытия и одинаковый цвет.Различаются тени только значениями с ущерба.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв освещена, другая часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   body {
    фон: # f0f0f0; / * Цвет фона веб-страницы * /
   }
   .инсульт {
    шрифт: жирный 3em Arial, без засечек;
    цвет: # f0f0f0; / * Цвет текста, совпадает с цветом фона * /
    текстовая тень: #fff -1px -1px 0,
                 # 333 1px 1px 0;
   }
  
 
 
    Рельефный текст

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

  тень текста: # 333 -1px -1px 0,
              #fff 1px 1px 0;

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения изменить цвет тени и поставить желаемый радиус размытия. Временное свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым.На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   .свет {
    тень текста: # 5dc8e5 0 0 10px; / * Свечение голубого цвета * /
    цвет: # 0083bd;
   }
   .темно {
    тень текста: красный 0 0 10 пикселей; / * Свечение красного цвета * /
   }
  
 
 
    Светлая сторона  
    Тёмная сторона

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис.7), причём степень размытия легко регулировать через параметр text-shadow.

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как прозрачный (пример 6). Цвет размывает эту размытость букв.

Пример 6. Размытие текста

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   .blur {
    тень текста: # 000 0 0 5px;
    цвет: прозрачный; / * Прозрачный цвет текста * /
   }
  
 
 
    Нерезкий текст

Тень и псевдоклассы

Тень не обязательно добавляется непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами: hover и: first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на ней курсора мыши.В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10 + CrOpSaFx

  

 
  
   Текст 
  <стиль>
   a: hover {/ * Вид ссылки при наведении на нее курсора * /
    тень текста: # 5dc8e5 0 0 5px;
    цвет: # 000;
   }
   p: первая буква {/ * Первая буква абзаца * /
    размер шрифта: 2em;
    text-shadow: красный 1px 1px 0, красный -1px -1px 0,
                 красный -1px 1px 0, красный 1px -1px 0;
   }
  
 
  
    Нишевый проект тормозит  традиционный канал , не считаясь с
      затратами. Структура рынка, отбрасывая подробности, стабилизирует
      департамент маркетинга и продаж, используя опыт предыдущих кампаний.
      Построение бренда, безусловно, спонтанно отталкивает конвергентный
      PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой
      социальный статус, повышая конкуренция. Торговая марка естественно
      обуславливает план размещения, используя опыт предыдущих кампаний.

текст с тенью. Несколько теней текста — учебник CSS

Еще один способ украсить веб-страницу — сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста. Вы можете настроить тени, ее смещение и размытие.

Задать в CSS тень текста можно с помощью свойств text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini — этот браузер лишь частично поддерживает свойство.Ниже показан пример записи стиля и значений свойств:

h2 {
тень текста: 3px 5px 6px # 6C9;
}

Как видно, мы указали целых четыре значения через пробел. Пройдемся по порядку:

3px — первое значение отвечает за смещение тени по оси X (вправо, влево). Положительная тень сдвигается вправо, отрицательным — влево.
5px — второе значение отвечает за смещение тени по оси Y (вниз, вверх).Положительная тень сдвигается вниз, а отрицательное — вверх.
6px — третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.
# 6c9 — четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.

Как выглядит тень в браузере (скриншот):

Скриншот: текст с тенью, CSS

Несколько теней CSS для текста

Также использовать несколько значений для свойств text-shadow.Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.

Пример:

h2 {
тень текста: 3px 5px 6px # 6C9, -6px -7px 6px # D9FFA7;
}

Результат применения такого стиля виден на скриншоте:

Скриншот: несколько теней для текста CSS

С помощью свойств CSS text-shadow можно создать действительно красивые вещи. Вы можете экспериментировать: установить большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для прозрачности.Вот что может получиться, если уделить этому свойству достаточное количество внимания:

Скриншот: объемная тень текста в CSS

Далее в учебнике: как задать интервалы в CSS между символами, словами и строками.