1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: text-shadow
slug: Web/CSS/text-shadow
translation_of: Web/CSS/text-shadow
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">CSS-свойство <strong><code>text-shadow</code></strong> добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам <code><a href="/en-US/docs/Web/CSS/text-decoration">decorations</a></code>.</span> Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.</p>
<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
<p class="hidden">Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам запрос на извлечение (pull request).</p>
<h2 id="Syntax_2">Syntax</h2>
<pre class="brush:css no-line-numbers">/* смещение-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;
</pre>
<p>Это свойство определено как разделённый запятыми список теней.</p>
<p>Каждая тень определена как два или три значения <code><длина></code>, за которыми следует необязательное значение <code><цвет></code>. Первые два значения <code><длина></code> определяют параметры <code><смещение-x></code> и <code><смещение-y></code>. Третье необязательное значение <code><длина> задаёт</code> <code><радиус-размытия></code>. Значение <code><цвет></code> определяет цвет тени.</p>
<p>Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.</p>
<p>Это свойство можно применить к <a href="/ru-RU/docs/Web/CSS/Pseudo-elements">псевдо-элементам</a> {{cssxref("::first-line")}} и {{cssxref("::first-letter")}}.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt>{{cssxref("<цвет>")}}</dt>
<dd>Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.</dd>
<dt><code><смещение-x> <смещение-y></code></dt>
<dd>Обязательные. Эти величины {{cssxref("<длина>")}} задают расстояние тени от текста. <code><смещение-x></code> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <code><смещение-y></code> определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в <code>0</code>, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <code><радиус-размытия></code>.</dd>
<dt><code><радиус-размытия></code></dt>
<dd>Необязательный. Это величина {{cssxref("<длина>")}}. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию <code>0</code>, в случае когда параметр не определён.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="Простая_тень">Простая тень</h3>
<div>
<pre class="brush: css">.red-text-shadow {
text-shadow: red 0 -2px;
}</pre>
<pre class="brush: html"><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre>
</div>
<p>{{EmbedLiveSample('Простая_тень', '660px', '90px')}}</p>
<h3 id="Множественные_тени">Множественные тени</h3>
<div>
<pre class="brush:css">.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;
}</pre>
<pre class="brush: html"><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p></pre>
</div>
<p>{{EmbedLiveSample('Множественные_тени', '660px', '170px')}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Определяет <code>text-shadow</code> как анимируемую.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>Свойство CSS <code>text-shadow</code> было <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">ошибочно определено в CSS2</a> и удалено из CSS2 (Level 1). Спецификация The CSS Text Module Level 3 исправила синтаксис. Позже оно было перемещено в <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
</tr>
</tbody>
</table>
<p id="Syntax">{{cssinfo}}</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.text-shadow")}}</p>
<h3 id="Примечание_Quantum_CSS">Примечание Quantum CSS</h3>
<ul>
<li>В движке Gecko есть программная ошибка в результате которой метод перехода ({{cssxref("transition")}}) не будет производить переход от элемента со свойством <code>text-shadow</code> с заданным цветом к элементу со свойством <code>text-shadow</code> без заданного цвета ({{bug(726550)}}). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, выпуск которого запланирован уже в версии Firefox 57).</li>
</ul>
<h2 id="Также_смотрите">Также смотрите</h2>
<ul>
<li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - Интерактивный генератор теней CSS.</li>
<li>{{cssxref("box-shadow")}}</li>
<li>Тип данных {{cssxref("<color>")}} (для определения цвета теней)</li>
<li><a href="/ru-RU/docs/Web/HTML/Applying_color">Определение цвета для элемента HTML посредством CSS</a></li>
</ul>
|
