text-shadow — CSS | MDN

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

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

text-shadow: 1px 1px 2px black;


text-shadow: #fc0 1px 0 10px;


text-shadow: 5px 5px #558abb;


text-shadow: white 2px 5px;


text-shadow: 5px 10px;


text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

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

Каждая тень определена как два или три значения <длина>

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

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

Значения

<цвет>

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

<смещение-x> <смещение-y>

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

<радиус-размытия>

Необязательный. Это величина <длина>. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию 0, в случае когда параметр не определён.

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

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

BCD tables only load in the browser

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

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

Свойства CSS: text-shadow

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

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

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

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

Пример заголовка с тенью

В этом примере мы добавляем к заголовку второго уровня красную тень, которая отбрасывается немного вправо и вниз относительно самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать тень размытой. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет тени должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх). Кстати, браузеры на движке 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;
}

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

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

Контуры

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

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. Ниже приводятся два примера, взятых с сайта http://maettig.com

Старт/стоп.

Анимация тени

Горящий текст

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

Интересный пример, демонстрирующий свойство 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 — еще несколько примеров

Несколько примеров на русском

Реклама

CSS: тени

Отбрасывание теней

С момента написания этой страницы во многие реализации CSS было добавлено свойство ‘box-shadow’ из CSS уровня 3, что делает описанный ниже метод необязательным. Смотрите “Закругленные углы и блоки с тенью” в качестве примера. Эта страница также показывает более мощный, но в то же время более сложный, способ создания теней при помощи CSS уровня 2.

В CSS2 нет свойства, чтобы добавить тень к блоку. Вы можете попробовать добавить кайму справа и внизу, но это не будет выглядеть правильно. Тем не менее, если у вас есть два вложенных элемента, вы можете использовать внешний элемент как тень для внутреннего. Например, если у вас есть такой текст (HTML):

<div class=back>
  <div class=section>
    <h3>Пусть роза пахнет, - разве ощущает</h3>
    <address>Генрих Гейне (1797-1856), пер. Михаил Фроман</address>

    <p>Пусть роза пахнет, - разве ощущает<br>
    ...
  </div>
</div>

Вы можете использовать наружный DIV в качестве тени для внутреннего. Результат должен выглядеть как эта отдельная страница. Сначала, задайте фоновый цвет для BODY (в нашем примере — светло-зеленый), наружный DIV сделайте немного темнее фона (зелено-серый) и внутренний DIV отличным от фона (например, желто-белый):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Затем, используя свойства margin и padding, вы смещаете внутренний DIV немного влево и вверх от наружного DIV:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Вам также нужно переместить наружный DIV немного вправо. И если у вас несколько секций, вы возможно, захотите оставить между ними немного места:

div.back {margin: 3em 0 3em 5em}

В принципе, это всё, что надо сделать. Вы также можете добавить рамку вокруг внутреннего DIV, если хотите. Вы также, возможно, захотите сделать заливку внутри него, например:

div.section {border: thin solid #999; padding: 1.5em}

Разумеется, вы можете изменять размер теней на ваш вкус.

Текстовые тени

В CSS действительно есть свойство для добавления тени к тексту. У него четыре параметра: цвет тени, горизонтальный отступ (позитивный — вправо), вертикальный отступ (позитивный — вниз) и размытие (0 — резкая тень). Например:

h4 { text-shadow: red 0.2em 0.3em 0.2em }

У этого текста есть тень?

текст с тенью. Несколько теней текста — учебник 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 для текста

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

Пример:

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

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

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

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

генератор тени текста в CSS3

aliasall-scrollautocellcontext-menucol-resizecopycrosshairdefaulte-resizeew-resizegrabgrabbinghelpmoven-resizene-resizenesw-resizens-resizenw-resizenwse-resizeno-dropnonenot-allowedpointerprogressrow-resizes-resizese-resizesw-resizetextw-resizewaitzoom-inzoom-outinitialinheritКурсор

AutoInitialInheritpx em %Ширина объекта

AutoInitialInheritpx em %Высота объекта

Внутренний отступ

Padding сверху

Padding справа

Padding снизу

Padding слева

Ширина объекта

pxem%Единица ширины

Высота объекта

pxem%Единица высоты

Кайма

SolidDashedDottedDoubleGrooveRidgeInsetOutsetHiddenNoneСтиль каймы

Ширина каймы

pxemЕдиница ширины

Цвет каймы

Фон

Фон

no-repeatrepeat-xrepeat-yrepeatПовторение

scrollfixedlocalinitialinheritПрикрепление

centerleftrightпозиция X

centertopbottomпозиция Y

autocovercontaininitialinheritдлина (px)процентШирина фона

autocovercontaininitialinheritдлина (px)процентВысота фона

Отступ X

Отступ Y

Ширина фона

Высота фона

Что такое генератор тени текста в CSS3?

Заметка: чтобы настройки генератора работали обязательно отметьте галочку справа от названия генератора.

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

Шрифт

НормальныйЖирныйКурсивЖирный курсивСтиль шрифта

Размер шрифта

pxemЕдиница размера

Цвет шрифта

CenterLeftRightJustifyInitialInheritВыравнивание

Тень текста

Цвет тени

Отступ слева (px)

Отступ справа (px)

Размытие (px)

Непрозрачность

CSS, текст shadow и overflow.

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

Свойство text-overflow

Свойство text-overflow: ; используется для определения области видимости текста в блоке, в ситуации, когда текст полностью не помещается в выделенный блок. Данное свойство может принимать два значения:

• clip — текст будет обрезан по размеру области/блока.
• ellipsis — текст будет обрезан и концу добавится многоточие.

Свойство text-overflow: ; будет работать только в том случае, если для блока установлено свойство overflow: ; с значением auto, scroll или hidden.

И свойство white-space, которому нужно указать значение nowrap запрета переноса строк. В итоге получаем вот такой код.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Текст обрезается с помощью свойства text-oveflow

</body>
</html>

И ниже его стили.

CSS

p{
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    background: #fc0;/* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    width: 150px; /*Ширина блока*/
    text-overflow: ellipsis; /* Добавляем многоточие */
}

Используя такую структуру кода Вы всегда можете обрезать текст, в зависимости от размера блока.

Свойство text-shadow

Переходим к рассмотрению следующего свойства — это text-shadow. Данное свойство добавляет тень к тексту. Для тени задаются параметры: цвет, смещение относительно надписи и размытие. Также, формируемая тень может иметь разный характер: внутренняя тень текста, тень под текстом и тень вокруг текста.

Для этого свойства используется следующий синтаксис:

CSS

text-shadow: none | тень [,тень]*
где тень:
   

Параметры являются обязательными, параметр , по умолчанию установлен в 0, является не обязательным параметром и задает размытие той самой тени.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Текст, которому установлена тень. Свойство text-shadow

</body>
</html>

И ниже его стили.

CSS

.text-shadow p{
    text-shadow: 1px 1px 0 crimson, 3px 8px 18px blue; /* Параметры тени */
    color: green; /* Зеленный цвет текста */
    font-size: 22px; /* Размер текста */
}

Имейте ввиду, что каждый браузер будет отображать тени по своему, в зависимости от его версии. Данное свойство применяется достаточно редко, поэтому для того, чтобы понять как это, все же, работает, стоит самому поэкспериментировать, меняя данные значения text-shadow:1px 1px 0 crimson, 3px 8px 18px blue;.

Вот мы рассмотрели еще свойства относящиеся к тексту. В Демо показано как каждое из этих свойств работает. На этом все, мы рассмотрели все Основные свойства, которые позволяют нам работать и изменять отображаемый вид текста.

CSS3 устанавливает эффект тени текста, устанавливает эффект тени стиля text-shadow шрифта текста, изначально в версии CSS2 также имеет это свойство, но в CSS3 text shadow text-shadow применяется снова, обогащает макет текста и эффект украшения макета

	*text-shadow*

 
тень текста: 1px 1px 2px черный;


тень текста: # fc0 1px 0 10px;


тень текста: 5px 5px # 558abb;


тень текста: белый 2px 5px;


текстовая тень: 5px 10px;


текстовая тень: наследовать;
текстовая тень: начальная;
тень текста: вернуться;
тень текста: отключено;
  

 нет |  # 
 где 
   = [ {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.
  

.text_shadow_offset {
  тень текста: 2px 1px;
}
 

 .text_shadow_No_blur_radius {
  тень текста: 1px 0.8px;
}

.text_shadow_blur_radius {
  тень текста: 1px 0.8px 5px;
}
 

 .text_shadow_no_color {
  тень текста: 1px 0.8px 2px;
}

.text_shadow_color {
  тень текста: 0px 0px 3px aqua;
}
 

 .single_text_shadow {
  тень текста: 0.5px 1.8px 1px Помидор;
}

.multi_text_shadow_2 {
  text-shadow: 0.5px 0.1em 0.5px Помидор, 3px 1px синий;
}

.multi_text_shadow_3 {
  text-shadow: 0.5px 0.1em 0.5px Помидор, 3px 1px синий, 6px 0px 1px желтый;
}
 

 тень текста: смещение-x, смещение-y, радиус размытия, цвет; 

 

 
 Карьерная карма 
 

<стиль>

h2 {
цвет: светло-голубой;
} 

 

 
 Карьерная карма 
 

<стиль>

h2 {
текстовая тень: 1px 1px;
} 

 

 
 Карьерная карма 
 

<стиль>

h2 {
тень текста: 1px 1px розовый;
} 

 

 
 Карьерная карма 
 

<стиль>

h2 {
тень текста: 3px 3px 2px розовый;
} 

 тень текста: shadowOne, shadowTwo; 

 

 
 Карьерная карма 
 

<стиль>

h2 {
text-shadow: 3px 3px 2px розовый, 6px 6px 5px оранжевый;
} 

h4 {text-shadow: 0.1em 0.1em # 333}
 

h4.a {text-shadow: 0.1em 0.1em 0.05em # 333}
h4.b {text-shadow: 0.1em 0.1em 0.2em черный}
 

h4 {цвет: белый}
h4.a {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}
 

h4 {тень текста: 0.2em 0,5em 0,1em # 600,
      -0.3em 0.1em 0.1em # 060,
      0.4em -0.3em 0.1em # 006}
 

h4.a {text-shadow: -1px -1px белый, 1px 1px # 333}
h4.b {text-shadow: 1px 1px белый, -1px -1px # 444}
 

h4 {text-shadow: -1px 0 черный, 0 1px черный,
      1px 0 черный, 0 -1px черный}
 

h4.a {text-shadow: 0 0 0.2em # 8F7}
h4.b {text-shadow: 0 0 0.2em # F87, 0 0 0.2em # F87}
h4.c {text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F,
        0 0 0.2em # 87F}