Shadow html text: text-shadow — CSS | MDN

26.01.1975 Разное

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) <hwb()> | (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) )
<hwb()> = hwb( [ (en-US)<hue> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US) / [ (en-US)<alpha-value> | (en-US) none] (en-US) ] (en-US)? (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).

Свойство text-shadow | CSS справочник

Определение и применение

CSS свойство text-shadow добавляет тень к тексту. Допускается добавление нескольких теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделенных запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

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

CSS синтаксис:

text-shadow:"h-shadow (горизонтальная тень) v-shadow (вертикальная тень) blur-radius (радиус размытия) color (цвет) | none | initial | inherit";

JavaScript синтаксис:

object.style.textShadow = "5px 5px 5px orange" 

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

Значение	Описание
none	Тень у элемента отсутствует. Это значение по умолчанию.
h-shadow	Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
v-shadow	Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
blur-radius	Необязательное значение. Задаёт радиус размытия. По умолчанию значение 0.
color	Необязательное значение. Задаёт цвет тени (Имя цвета | HEX | RGB(A) | HSL(A). Значением по умолчанию является черный цвет.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент <p>):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-shadow в CSS</title>
<style> 
p {
color: #fff; /* устанавливаем цвет текста белый*/	
text-shadow: 1px 1px 4px #000; /* размещаем текстовую тень*/	
} 
p::selection { /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: 1px 1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
p::-moz-selection { /* описание псевдоэлемента для браузера Firefox (дублируем стили) */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: -1px -1px 4px #fff; /* размещаем текстовую тень*/	
color: #000; /* устанавливаем цвет текста черный */		
} 
</style>
</head>
	<body>
		<p>Текст с добавленной тенью.
 
  </p>
		<p>Текст с добавленной тенью.</p>
	</body>
</html>

В этом примере мы для всех азацев (элемент <p>) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным

Результат нашего примера:

Множественная текстовая тень

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

Пример блока объявлений для множественной тени:

.multipleShadow {
text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */	
}

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример создания множественной текстовой тени</title>
<style> 
.test {
text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */
line-height: 150px; /* задаем высоту строки */
text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red; /* используем 8 теней в одном объявлении */
} 
 .test2 {
text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5); /* устанавливаем тень смещенную вправо */
} 
.test3 {
text-shadow: -6px 6px 2px rgba(0, 255, 0, 0. 5); /* устанавливаем тень смещенную влево */
} 
.test4 {
text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5); /* используем только радиус размытия, получая неоновый эффект */
} 
</style>
</head>
	<body>
		<div class = "test">Радужный текст</div>
		<div class = "test2">Текст с добавленной тенью</div>
		<div class = "test3">Текст с добавленной тенью</div>
		<div class = "test4">Текст с добавленной тенью</div>
	</body>
</html>

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

Для последнего блока мы установили радиус размытия 6px, а значения горизонтальной и вертикальной тени указали 0px, что придает некий неоновый эффект.

CSS3 text shadow blur, размытие текста

Применить: CSS3 text shadow blur, размытие текста.
Любой элемент с классом blur-text будет размывать текст:
К сожалению, не все браузеры поддерживают text-shadow ( тень для текста ).

Рассмотрим следующий фрагмент CSS:

.blur-text
{
	color: transparent;
	text-shadow: 0 0 5px #000;
}

IE9 и ниже, понимают прозрачность, но не отображают тень для текста. Мы должны полагаться на наличие таких решений как,  Modernizr  или  Совместимость HTML5  для поддержки элементов HTML5.

Использовать JavaScript для свойств CSS3 это не хорошо. Будет ошибка, если JavaScript отключен или написан грязно. Каждый раз нужно будет проверять код, после применения изменений в таблице стилей css. К счастью появилось, другое решение для стилей CSS: @supports rule (соответствовать правилу). Основной синтаксис выглядит так:

@supports <condition> {
  /* rules */
}

Используем свойство @supports для размытого текста:

@supports (text-shadow: 0 0 5px #000) {
	.blur-text
	{
		color: transparent;
		text-shadow: 0 0 5px #000;
	}
}

Вы можете использовать логические AND, OR и NOT, например:

@supports ( (display: table-cell) and (display: list-item) ) {
	/* styles */
}

Не забываем о поставщиков префиксов:

@supports
	(
		(-webkit-transform: rotate(90deg)) or
		(-moz-transform: rotate(90deg)) or
		(-ms-transform: rotate(90deg)) or
		(-o-transform: rotate(90deg)) or
		(transform: rotate(90deg))
	) {
	/* styles */
}

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

К сожалению, @supports ограничена для совместимости в браузерах. На момент написания статьи, только опера 12,1 понимает @supports как стандарт. Но доступно и в Firefox 20 и в Chrome 24, но пройдёт некоторое время, прежде чем @supports добавят в IE и Safari.

В заключение

С появлением свойства совместимости @supports для браузеров говорит о том, что дни Modernizr как JavaScript для поддержки стилей css3, сочтены.

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

text-shadow — CSS: каскадные таблицы стилей

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

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


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


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


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


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


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

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

Каждая тень задается двумя или тремя значениями , за которыми может следовать значение . Первые два значения — это значения и . Третье, необязательное, значение — это . Значение — это цвет тени.

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

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

Значения

<цвет>

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

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

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

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

Дополнительно. Это значение . Чем выше значение, тем больше размытие; тень становится шире и светлее. Если не указано, по умолчанию используется 0 .

 нет | # 
 где 
   = [ {2,3} && ? ]  
 
 где 
   =  |  |  |  |  | <шестнадцатеричный цвет> | <названный цвет> | текущий цвет |   
 
 где 
   = rgb({3} [/]?) | rgb(<число>{3} [/<альфа-значение>]?) | rgb(<процент>#{3}, <альфа-значение>?) | rgb(<число>#{3}, <альфа-значение>?) 
  = rgba(<процент>{3} [/<альфа-значение>]?) | rgba(<число>{3} [/<альфа-значение>]?) | rgba(<процент>#{3}, <альфа-значение>?) | rgba(<число>#{3}, <альфа-значение>?) 
  = hsl(<оттенок> <процент> <процент> [/<альфа-значение>]?) | hsl( <оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla( <оттенок> <процент> <процент> [ / <альфа-значение> ]? ) | hsla( <оттенок>, <процент>, <процент>, <альфа-значение>? ) 
  = hwb( [<оттенок> | нет] [<процент> | нет] [<процент> | нет ] [ / [<альфа-значение> | нет]]? )  
 
 где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> | <угол>  
 

Простая тень

  . красный текст-тень {
  тень текста: красный 0-2px;
}
  

  
Sed ut perspiciatis unde omnisiste
    ошибка natus sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventorye.
  

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

  .white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px черный, 0 0 1em синий, 0 0 0.2em синий;
  белый цвет;
  шрифт: 1.5em Georgia, с засечками;
}
  

  
Sed ut perspiciatis unde omnisiste
    ошибка natus sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventorye.
  

Таблицы BCD загружаются только в браузере

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

• В Gecko есть ошибка, из-за которой transition не работает при переходе от text-shadow с указанным цветом к text-shadow

  без указания цвета (баг 726550). Это было исправлено в новом параллельном CSS-движке Firefox (также известном как Quantum CSS или Stylo, который планируется выпустить в Firefox 57).

  

Генератор CSS тени текста онлайн

ПРЕДПРОСМОТР

Галерея эффектов

Неон

Пылающий

Люкс

Гладкая

Ретро

Светящийся

Тактильный

Новости

Конфеты

Плавающий

80-е

Дальний

Контур

Любовь

Вставка

Блоки

Могила

Твердый

Мультфильм

Вегас

Комикс

Глубокий

Мумия

Герой

Дракула

Размыто

Тиснение

Пресс

Вырезать

Призрак

Выберите предопределенный стиль из галереи или создайте тень текста в соответствии с вашими предпочтениями.Настройте нужные атрибуты, чтобы получить код CSS.

Сдвиньте тень вправо/вниз, установите размытие и непрозрачность и выберите цвет из палитры, чтобы получить свой CSS. Используйте онлайн-редактор, чтобы настроить свой стиль вручную. Следите за эволюцией своей тени в предварительном просмотре в реальном времени, где вы можете установить собственный цвет текста и фона.

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

Обратите внимание, что последние пять элементов в галерее (Blurry, Emboss, Press, Carve, Ghost) нельзя настроить после загрузки для предварительного просмотра, поскольку они используют цвета альфа-канала и другие атрибуты, не поддерживаемые этим веб-сайтом. Например, дизайн «Призрак» имеет полностью прозрачный цвет текста, а вся видимая и читаемая часть состоит из теней.Другой элемент, называемый «Вырезанный», также прозрачен и использует фоновый клип : текст , который показывает фон только там, где находится текст.

Совет разработчика для профессионалов. Перенесите среду разработки/проектирования веб-приложений в облако с помощью высокопроизводительного citrix vdi от CloudDesktopOnline и получите легкий удаленный доступ к основным инструментам веб-разработки из любого места на любом устройстве (ПК/Mac/Android/iOS). ). Узнайте больше о MS Azure и управляемых службах Azure, посетив одного из ведущих поставщиков решений для облачного хостинга — Apps4Rent.

Текстовая тень CSS

<стиль> ч2 { семейство шрифтов: без засечек; белый цвет; текст-тень: 1px 1px 8px черный, .5em -.5em 0 золота, 1em .4em 0 оранжевый, 1.5em .4em 10vw оранжевый, 0 0 10vw золото; размер шрифта: 10vw; }

Тени CSS

Свойство CSS text-shadow используется для применения эффектов тени к тексту.

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

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

Первые два значения — это значения длины , которые определяют горизонтальное смещение тени и вертикальное смещение соответственно (это обязательные значения). Третье значение длины может использоваться для определения радиуса размытия тени (необязательно).И значение цвета можно использовать для определения цвета тени (необязательно).

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

Тени текста не обрезаются до затененной формы и могут просвечиваться, если текст частично прозрачен. Кроме того, тени текста не влияют на макет, не вызывают прокрутку и не увеличивают размер прокручиваемой области.

Синтаксис

тень текста: нет | [ <длина>{2,3} && <цвет>? ]#

Эти значения объясняются ниже.

Возможные значения

нет

Нет тени.

1-й длина

Первое значение длины задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от поля, а отрицательное значение — влево.

2-я длина

Второе значение длины задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.

3-й длина

Третье значение длины определяет радиус размытия . Большие значения приводят к более размытой тени. Значение 0 приводит к резкой тени. Отрицательные значения не допускаются.

цвет

Это значение определяет цвет тени. Если это значение не указано, тень имеет результирующий цвет чернил, которые она затеняет.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный

Представляет значение, указанное как начальное значение свойства.

унаследовать

Представляет вычисленное значение свойства родительского элемента.

снято с охраны

Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение

нет

Применяется к

Все элементы

Унаследовано?

Да

СМИ

Визуальный

Анимируемый

Да (см. пример)

Пример кода

/* Одна тень */ ч2 { тень текста: 4px 4px 8px синий; } /* Несколько теней */ ч2 { text-shadow: 4px 4px 8px синий, 8px -4px 8px оранжевый; } /* Тень без указания цвета.Это будет использовать цвет текста. */ ч2 { тень текста: 4px 4px 8px; } /* Тень без указания радиуса размытия или цвета. */ ч2 { тень текста: 4px 4px; }

Официальные характеристики

Свойство text-shadow было введено в CSS2, исключено из CSS2.1, а затем повторно введено в CSS3 (в модуле оформления текста CSS уровня 3).

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

Свойство text-shadow CSS используется для добавления теней к тексту.Вы можете выбрать цвета здесь: Цвета HTML.

Свойство text-shadow является одним из свойств CSS3.

Каждая тень определяется 2-3 значениями длины и <цветом>. Первое значение устанавливает расстояние по горизонтали (смещение по оси x), второе значение устанавливает расстояние по вертикали (смещение по оси y), третье значение устанавливает радиус размытия, а значение цвета устанавливает цвет тени.

Смещение по x и по y являются обязательными, третье значение не является обязательным.

Синтаксис

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

Пример свойства text-shadow:

  

  <голова>
    
    <стиль>
      . тень {
        тень текста: 2px 2px #1c87c9;
      }
    
  
  <тело>
     
Пример свойства Text-shadow
 
    
Например, какой-нибудь абзац.
    
Некоторый абзац со свойством text-shadow.
  
  

Результат

Пример свойства text-shadow со значениями «смещение по оси x», «смещение по оси y», «радиус размытия» и «цвет»:

  

  <голова>
    <стиль>
      п {
        тень текста: 5px 3px 2px #8ebf42;
        шрифт: 1em Roboto, Helvetica, без засечек;
      }
    
  
  <тело>
     
Пример свойства Text-shadow
 
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и смешал ее, чтобы сделать книгу образцов шрифта.
  
  

Значения

Значение	Описание	Играй
ч-тень	Горизонтальное смещение тени. При положительном значении тень рисуется с правой стороны текста, при отрицательном - с левой стороны.	Сыграй "
v-тень	Вертикальное смещение тени (ось Y). Если значение положительное, тень находится под текстом, если отрицательное — выше.	Сыграй "
радиус размытия	Радиус размытия определяет размер и степень размытия тени.Мы не можем использовать отрицательные значения. Значение по умолчанию: 0,	Сыграй "
цвет	Позволяет выбрать цвет тени. Можно использовать имена цветов, шестнадцатеричные коды цветов, rgb(), rgba(), hsl(), hsla().	Сыграй "
нет	Тень не указана. Это значение по умолчанию для этого свойства.	Сыграй "
начальный	Заставляет свойство использовать значение по умолчанию.	Сыграй "
унаследовать	Наследует свойство от родительского элемента.

  Автор  : Эшли Нолан
  Разработано  : HTML и CSS 

  Автор  : Крис Эйзенбраун
  Разработано : HTML и CSS, Js 

  Автор : Антти Найман
  Разработано  : HTML и CSS 

  Автор  : Томми Ходжинс
  Разработано  : HTML и CSS 

  Автор  : Dodozhang21
  Разработано  : HTML и CSS 

  Автор  : Daniel Gonzalez
  Разработано  : HTML и CSS 

  Автор  : Филдинг Джонстон
  Разработано  : HTML и CSS 

  Автор  : Хорхе Эпунан
  Разработано  : HTML и CSS 

  Автор  : Деннис Гарн
  Разработано : HTML и CSS, Js 

  Автор : Br3ad
  Разработано  : HTML и CSS 

  Автор  : George W. Парк
  Разработано  : HTML и CSS 

  Автор  : Ronalds Vilcins
  Разработано  : HTML и CSS 

  Автор  : Milica
  Разработано  : HTML и CSS 

  Автор  : Digisam
  Разработано  : HTML и CSS 

  Автор  : Twixes
  Разработано  : HTML и CSS 

  Автор  : Сара Кульман
  Разработано  : HTML и CSS 

  Автор  : Амелия Беллами Ройдс
  Разработано  : HTML и CSS 

  Автор  : Кейт Хаммер
  Разработано  : HTML и CSS 

  Автор  : Джордж У. Парк
  Разработано  : HTML и CSS 

  Автор  : Florencia Aquino
  Разработано  : HTML и CSS 

 /* смещение-x | смещение-y | радиус размытия | цвет */ 
 text-shadow: 2px 2px 4px зеленый; 

 /* смещение-x | offset-y */ 
 text-shadow: 2px 2px; 

 тень текста: 2px 0px; /* тень будет отображаться только по оси x */ 
 text-shadow: 0px 2px; /* покажет тень только по оси Y */