diff options
Diffstat (limited to 'files/ru/web/css/text-shadow/index.html')
| -rw-r--r-- | files/ru/web/css/text-shadow/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/ru/web/css/text-shadow/index.html b/files/ru/web/css/text-shadow/index.html new file mode 100644 index 0000000000..891786f7b1 --- /dev/null +++ b/files/ru/web/css/text-shadow/index.html @@ -0,0 +1,138 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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('Simple_shadow', '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('Multiple_shadows', '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> + +<div class="hidden">Таблица совместимости на этой странице была сформирована из структурированных данных. Если Вы хотите внести вклад в эти данные, сверьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение (pull request).</div> + +<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> |