Shadow html text: text-shadow — CSS | MDN


26.01.1975 Facebook Twitter LinkedIn Google+ Разное


Содержание

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;

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

Каждая тень определена как два или три значения <длина>

, за которыми следует необязательное значение <цвет>. Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y>. Третье необязательное значение <длина> задаёт <радиус-размытия>. Значение <цвет> определяет цвет тени.

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

Это свойство можно применить к псевдо-элементам ::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 свойства

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

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

CSS3

Наследуется

Да.

Анимируемое

Да.

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

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент <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 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным

4 пикселям.

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

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

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

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по 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, что придает некий неоновый эффект.

Рис. 68а Пример создания множественной текстовой тени.CSS свойства

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

Несколько теней CSS для текста

Также допускается использовать несколько групп значений для свойства text-shadow. Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.

Пример:


h2 {
text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7;
}

Результат применения такого стиля виден на скриншоте:

Скриншот: несколько теней для текста CSS

С помощью свойства CSS text-shadow можно создавать действительно красивые вещи. Вы можете экспериментировать: устанавливать большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для настройки прозрачности. Вот что может получиться, если уделить этому свойству достаточное количество внимания:

Скриншот: объемная тень текста в CSS

Далее в учебнике: как задать интервалы в 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 являются обязательными, третье значение не является обязательным.

Исходное значение нет
Относится к Все элементы. Это также относится к ::first-letter и ::first-line.
По наследству Да.
Анимируемый Да.
Версия CSS3
Синтаксис DOM объект.style.textShadow = "1px 3px 3px #8ebf42";

Синтаксис

  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(). Сыграй "
нет Тень не указана. Это значение по умолчанию для этого свойства. Сыграй "
начальный Заставляет свойство использовать значение по умолчанию. Сыграй "
унаследовать Наследует свойство от родительского элемента.

20 Текстовые эффекты теней CSS

Вы можете добавить несколько теней и потрясающие эффекты к тексту для своего веб-дизайна. Вы можете спросить, как я могу добавить эффекты тени к тексту? Да, вы можете использовать эффекты тени текста CSS, просто скопировав и вставив коды.

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

Коллекция эффектов CSS Text-Shadow и Pattern
  Автор  : Эшли Нолан
  Разработано  : HTML и CSS 

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

Анимированный огонь Text-Shadow
  Автор : Антти Найман
  Разработано  : HTML и CSS 

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

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

Эффект Groovy CSS
  Автор  : Daniel Gonzalez
  Разработано  : HTML и CSS 

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

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

Эффект 3D-текста – Mousemove
  Автор  : Деннис Гарн
  Разработано : HTML и CSS, Js 

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

Эффект мерцающей неоновой вывески с использованием CSS Text & Box Shadow
  Автор  : George W. Парк
  Разработано  : HTML и CSS 

Тень текста с использованием CSS
  Автор  : Ronalds Vilcins
  Разработано  : HTML и CSS 

CSS Эффект перемещения мыши Текстовая тень
  Автор  : Milica
  Разработано  : HTML и CSS 

Mixin – случайное перемешивание теней текста и случайный цветовой эффект
  Автор  : Digisam
  Разработано  : HTML и CSS 

Затенение текста и блоков на основе движения курсора
  Автор  : Twixes
  Разработано  : HTML и CSS 

Текстовый эффект тени – CSS
  Автор  : Сара Кульман
  Разработано  : HTML и CSS 

Эффект тени 3D-текста
  Автор  : Амелия Беллами Ройдс
  Разработано  : HTML и CSS 

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

Текстовое поле CSS Тень Эффект неоновой вывески
  Автор  : Джордж У. Парк
  Разработано  : HTML и CSS 

Текстовая тень Эффект перемещения мыши с помощью CSS
  Автор  : Florencia Aquino
  Разработано  : HTML и CSS 

Свойство CSS text-shadow. Добавление теней к тексту с помощью CSS | by Christina Truong

Добавление теней к тексту с помощью CSS

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

Предпочитаете смотреть видео? Эта статья является дополнением к моей серии «Расшифровано Кристиной» на YouTube.

Есть несколько основных способов выделить ваш текст. Вы можете сделать его жирным, изменить цвет или использовать другой размер шрифта.

Другой вариант — использовать свойство text-shadow для добавления тени.С этим свойством используются четыре значения. Два обязательны, offset-x и offset-y , и два необязательных, blur-radius и color значение.

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

Давайте рассмотрим, как определить каждое значение.

Значение offset-x определяет, насколько далеко от элемента будет отображаться тень на оси x , которая проходит слева направо.Второе значение, offset-y , определяет расстояние тени по оси Y , которая проходит сверху вниз.

Эти значения могут быть определены с любым типом данных , который представляет собой число, за которым следует любая единица измерения, используемая для представления значения расстояния (например, px , em , rem или проценты). Кроме того, при использовании свойства с несколькими значениями каждое из них должно быть разделено пробелом.

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

Поскольку требуются оба значения: offset-x и offset-y , если вы добавите только значение, вы не увидите никаких изменений.Но если вам нужна тень только по оси X, установите для параметра offset-y значение 0 или наоборот.

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

Раньше я всегда путал направления осей X и Y, пока не увидел пример с лирикой Бейонсе «Irreplaceable» в качестве напоминания. В песне она поет своему бывшему: «Налево налево, все, что у тебя есть, в ящик налево.Итак, ех (или х) налево!

Если задать только значения offset-x и offset-y , тень будет выглядеть точно так же, как копия текста.

Чтобы создать более мягкий эффект тени, добавьте третье значение, радиус размытия . Это размоет края тени. Здесь также можно использовать любой тип данных . Чем больше значение, тем больше и прозрачнее эффект размытия.

Последнее значение используется для изменения тени черного цвета по умолчанию на любой другой цвет путем добавления значения (т.г. ключевое слово, шестнадцатеричный код).

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

https://codepen.io/christinatruong/pen/JjWzXYO

Чтобы сделать эффект text-shadow немного более тонким, я обычно использую темно-серый цвет или что-то, что соответствует цвету фона, а не чисто черный. Это создаст более мягкую тень. (Обратите внимание, что шестнадцатеричные значения в примере используют сокращенную запись.)

Для других значений я считаю, что 1–3 пикселя обычно достаточно, чтобы дать вам небольшой эффект тени, не перегружая текст. Хотя всегда есть исключения из правил, поэтому я бы посоветовал поиграть с разными значениями, чтобы получить желаемый эффект. Но в двух словах, вот как вы добавляете тень к своему тексту.

Вот и все!

Я буду регулярно публиковать видео и сопутствующие материалы о конкретных элементах HTML или свойствах CSS, где я буду углубляться в каждое из них, поэтому подпишитесь на мой канал YouTube, чтобы получать уведомления.И если вы заинтересованы в прохождении полного курса, я рекомендую мой курс CSS Essential Training на LinkedIn Learning.

Тень текста CSS — javatpoint

Как следует из названия, это свойство CSS добавляет тени к тексту. Он принимает разделенный запятыми список теней, примененных к тексту. Его свойство по умолчанию — none. Он применяет один или несколько эффектов text-shadow к текстовому содержимому элемента.

Давайте посмотрим на синтаксис свойства text-shadow.

Синтаксис

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

Значения

h-shadow: Это необходимое значение.Он определяет положение горизонтальной тени и допускает отрицательные значения.

v-shadow: Это также обязательное значение, указывающее положение вертикальной тени. Он не допускает отрицательных значений.

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

.

color: Это цвет тени, а также необязательное значение.

нет: Это значение по умолчанию, что означает отсутствие тени.

начальный: Используется для установки значения свойства по умолчанию.

inherit: Он просто наследует свойство от своего родительского элемента.

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

Пример — простая тень

<голова> свойство веса шрифта <стиль> п.простой{ text-shadow: 3px 3px красный; } <тело>

Простая тень

Протестируйте сейчас

Пример — нечеткая тень

<голова> свойство веса шрифта <стиль> п.нечеткий { тень текста: 3px 3px 3px фиолетовый; размер шрифта: 30 пикселей; выравнивание текста: по центру; } <тело>

Нечеткая тень

Протестируйте сейчас

Пример — несколько теней

<голова> свойство веса шрифта <стиль> п. мульти { text-shadow: -3px -3px 3px синий, 3px 3px 3px красный; размер шрифта: 30 пикселей; выравнивание текста: по центру; } <тело>

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

Протестируйте сейчас

Пример — эффект свечения

<голова> свойство веса шрифта <стиль> .мульти { text-shadow: 0 0 .1em голубой; цвет фона: черный; размер шрифта: 50px; выравнивание текста: по центру; } <тело> <дел> Эффект свечения

Протестируйте сейчас
.
Comments