From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/text-shadow/index.html | 138 ++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 files/ru/web/css/text-shadow/index.html (limited to 'files/ru/web/css/text-shadow') 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 +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
+ + + +

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>. Третье необязательное значение <длина> задаёт <радиус-размытия>. Значение <цвет> определяет цвет тени.

+ +

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

+ +

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

+ +

Значения

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

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

+ +
{{csssyntax}}
+ +

Примеры

+ +

Простая тень

+ +
+
.red-text-shadow {
+  text-shadow: red 0 -2px;
+}
+ +
<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>
+
+ +

{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

+ +

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

+ +
+
.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 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>
+
+ +

{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Определяет text-shadow как анимируемую.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}Свойство CSS text-shadow было ошибочно определено в CSS2 и удалено из CSS2 (Level 1). Спецификация The CSS Text Module Level 3 исправила синтаксис. Позже оно было перемещено в CSS Text Decoration Module Level 3.
+ +

{{cssinfo}}

+ +

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

+ + + +

{{Compat("css.properties.text-shadow")}}

+ +

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

+ + + +

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

+ + -- cgit v1.2.3-54-g00ecf