Css text shadow: CSS text-shadow property

CSS text shadow

❮ Назад Полный CSS Справочник Дальше ❯

Пример

Базовый текст-тень:

h2 {
    text-shadow: 2px 2px #ff0000;
}

Подробнее примеры ниже.

---

Определение и использование

Свойство text-shadow добавляет тень к тексту.

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

Значение по умолчанию:	none
Inherited:	yes
Animatable:	yes. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.textShadow=»2px 5px 5px red»

---

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
text-shadow	4. 0	10.0	3.5	4.0	9.6

---

---

Синтаксис CSS

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

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

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

Значение	Описание
h-shadow	Обязательно. Положение горизонтальной тени. Допустимы отрицательные значения
v-shadow	Обязательно. Положение вертикальной тени. Допустимы отрицательные значения
blur-radius	Дополнительные. Радиус размытия. Значение по умолчанию — 0
color	Дополнительные. Цвет тени. Посмотрите на значения цвета CSS для полного списка возможных значений цвета
none	Значение по умолчанию. Без тени
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Tip: Read more about allowed values (CSS length units)

---

Другие примеры

Пример

Text-тень с эффектом размытия:

h2 {
    text-shadow: 2px 2px 8px #FF0000;
}

Пример

Текст-тень на белом тексте:

h2 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

Пример

Текст-тень с красным неоновым свечением:

h2 {
    text-shadow: 0 0 3px #FF0000;
}

Пример

Текст-тень с красным и синим неоновым свечением:

h2 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

---

Похожие страницы

CSS Справочник: CSS Text Effects

HTML DOM Справочник: textShadow Свойство

❮ Назад Полный CSS Справочник Дальше ❯

text-shadow — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Как понять
5. Подсказки
6. На практике
   1. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Свойство text-shadow даёт возможность добавить тень буквам в тексте.

Пример

Секция статьи «Пример»

Добавим нашем заголовку весёлую розовую тень!

<h2>Улыбнись!</h2>
           <h2>Улыбнись!</h2>

.main-title {  text-shadow: 5px 5px #ffe2e7;}
          .main-title {
  text-shadow: 5px 5px #ffe2e7;
}

Открыть демо в новой вкладке

Как пишется

Секция статьи «Как пишется»

У тени для текста много общего с тенью для блока — box-shadow.

Каждая тень состоит из следующих значений:

• Два или три значения размера с единицами измерения.
  • Если задано только два значения, то они интерпретируются как смещение по осям x и y.
  • Если задано и третье значение тоже, то оно отвечает за размытие тени.
• Цвет тени в любом доступном формате. Может быть указан до числовых значений размеров, так и после. Но не между значениями. А то браузер запутается.

Посмотрим на каждую из составляющих тени внимательнее:

Смещения по осям x и y — обязательные значения для тени. Могут принимать любые числовые значения, в том числе отрицательные. Значение по умолчанию равно 0 для обеих осей. Если первое значение положительное, то тень будет справа от буквы, если отрицательное — слева. Если второе значение положительное, то тень будет снизу, если отрицательное — сверху.

Радиус размытия — опциональное значение, положительное числовое значение с единицами измерения. По умолчанию значение 0, что делает его указание необязательным. Если не указываете его или пишите 0, то край тени будет резки, без размытия. Чем больше значение, тем шире область размытия и тем светлее сама тень.

Цвет — вроде бы опциональное, но на самом деле обязательное значение цвета тени. Почему? Если не указывать цвет, то решение остаётся за браузером. Как правило, браузер возьмёт значение свойства color текста, которому прописываете тень. Но Safari (sic!) отрисует прозрачную тень. Если вам действительно нужен цвет тени, совпадающий с цветом текста, то это можно указать явно при помощи ключевого слова currentColor.

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

Как понять

Секция статьи «Как понять»

«Объёмный» текст, созданный при помощи тени — старая уловка типографов и шрифтовиков.

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

Подсказки

Секция статьи «Подсказки»

💡 Свойство можно анимировать 🪄

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

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

🛠 На ретина-экранах тени могут выглядеть достаточно грязно. Обязательно проверяйте отображение текста с тенями на экранах с DPR ≥ 2.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

box-shadow

alt + ←

→

cursor

alt + →

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

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Базовая тень текста:

h2 {
тень текста: 2px 2px #ff0000;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Свойство text-shadow добавляет тень к тексту.

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

Показать демо ❯

Значение по умолчанию:	нет
Унаследовано:	да
Анимация:	да. Читать о анимированном Попытайся
Версия:	CSS3
Синтаксис JavaScript:	объект .style.textShadow=»2px 5px 5px красный» Попытайся

---

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
тень текста	4,0	10,0	3,5	4,0	9,6

---

---

Синтаксис CSS

text-shadow: h-shadow v-shadow цвет радиуса размытия |нет|начальный|наследовать;

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

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

..

Значение	Описание	Демо
h-тень	Обязательно. Положение горизонтальной тени. Допускаются отрицательные значения	Демо ❯
v-тень	Обязательно. Положение вертикальной тени. Допускаются отрицательные значения	Демо ❯
радиус размытия	Дополнительно. Радиус размытия. Значение по умолчанию: 0	Демо ❯
цвет	Дополнительно. Цвет тени. Полный список возможных значений цвета см. в CSS Color Values ​​	Демонстрация ❯
нет	Значение по умолчанию. Нет тени	Демо ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Совет: Подробнее о допустимых значениях (единицы длины CSS)

---

Дополнительные примеры

Пример

Text-shadow с эффектом размытия:

h2 {
  text-shadow: 2px 2px 8px #FF0000;
}

Попробуйте сами »

Пример

Тень текста на белом тексте:

h2 {
  цвет: белый;
  text-shadow: 2px 2px 4px #000000;
}

Попробуйте сами »

Пример

Text-shadow с красным неоновым свечением:

h2 {
  text-shadow: 0 0 3px #FF0000;
}

Попробуйте сами »

Пример

Text-shadow с красно-синим неоновым свечением:

h2 {

  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Попробуйте сами »

---

Связанные страницы

Учебник CSS: тень текста CSS

Ссылка HTML DOM: свойство textShadow

❮ Предыдущая Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

2 Top 9 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тень текста CSS

❮ Назад Далее ❯

---

Тень текста

Свойство text-shadow добавляет тень к тексту.

В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px;
}

Попробуйте сами »

Затем добавьте цвет (красный) к тени:

Текстовый эффект тени!

Пример

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

Попробуйте сами »

Затем добавьте к тени эффект размытия (5 пикселей):

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px 5px красный;
}

Попробуйте сами »

---

Дополнительные примеры теней текста

Пример 1

Тень текста на белом тексте:

h2 {
  цвет: белый;
  text-shadow: 2px 2px 4px #000000;
}

Попробуйте сами »

Пример 2

Text-shadow с красным неоновым свечением:

h2 {
  text-shadow: 0 0 3px #ff0000; Пример 3
}

Попробуйте сами »

Пример 4

h2 {
  цвет: белый;
  text-shadow: 1px 1px 2px черный, 0 0 25px синий, 0 0 5px темно-синий;
}

Попробуйте сами »

Совет: Перейдите к нашей главе «Шрифты CSS», чтобы узнать, как изменить шрифты, размер и стиль текста.

Совет: Перейдите к нашей главе Текстовые эффекты CSS, чтобы узнать о различных текстовых эффектах.

---

---

Проверьте себя с помощью упражнений

Упражнение:

Измените цвет текста всех элементов

на «красный».

<стиль>
п {
  : красный;
}

<тело>
   
Это заголовок
 
  
Это абзац
  
Это абзац

 

Начать упражнение

---

Свойство тени текста CSS

Свойство	Описание
тень текста	Определяет эффект тени, добавляемый к тексту

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

902 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.