Font shadow css: text-shadow — CSS | MDN

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) <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) )
где 
<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).

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

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

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

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

Самый простой пример использования данного стиля выглядит следующим образом.

h3.shadow
{
    text-shadow: 2px 2px 1px red;
}

Пример заголовка с тенью

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

h3.blurshadow
{
    text-shadow: 0.1em 0.1em 0.2em red;
}

Заголовок с размытой тенью

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

lightback {background-color: #F0F8FF}
.whitetext {color: white}
.whitetext-shadow {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Белый текст без тени на светлом фоне
Белый текст с тенью

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

Многослойные тени

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

Создадим на сером фоне два варинта объемного текста.

.ThreeD
{
    background: #CCC;
}

.a
{
    color: #D1D1D1;
    text-shadow: -1px -1px white, 1px 1px #333;
    font-size: 24pt;
}

.b
{
    color: #D1D1D1;
    text-shadow: 1px 1px white, -1px -1px #333;
    font-size: 24pt;
}

Выпуклый текст
Вдавленный текст

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

Контуры

Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.

p.contur
{
    background: #CCF;
    padding: 1em;
}

.conturtext
{
    font-size: 24pt;
    color: #BBE;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Текст с контуром

Неоновое свечение

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

.neon
{
    text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F
}

Неоновое свечение

Использование сценариев JavaScript

Также вы можете использовать свойство text-shadow в сценариях JavaScript. Ниже приводятся два примера, взятых с сайта http://maettig.com

Старт/стоп.

Анимация тени

Горящий текст

Дополнительная информация

Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.

Stylish text with the CSS text-shadow property (несколько примеров, в т.ч. пример огненного текста).

CSS Text-Shadow in Safari, Opera, Firefox and more — несколько интересных примеров.

Text-Shadow Exposed: Make cool and clever text effects with css text-shadow — еще несколько примеров

Несколько примеров на русском

Реклама

Свойство 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"

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

Версия 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 свойства

box-shadow — тень блока (внешняя и внутренняя)

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

Описание

CSS свойство box-shadow позволяет добавить одну или более тень для блока. Тень блока не влияет на размер и расположение самого элемента (несмотря на то, что тень может быть расположена далеко за его пределами), но она может перекрываться другими элементами, расположенными в коде после текущего элемента, или перекрывать другие элементы, расположенные в коде перед текущим элементом.

Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:

div {
  width: 300px;
  height: 200px;
  margin: 100px;
  background-color: silver;
  box-shadow: 0 0 10px 5px black,
              40px -30px 15px lime,
			  40px 30px 50px red,
			 -40px 30px 15px yellow,
			 -40px -30px 50px blue;
}

Попробовать »

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Синтаксис

box-shadow: none|смещение-х смещение-у размытие размер цвет [inset]|inherit;

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

Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.

Пример

div#myDIV {
background-color: yellow;
width: 200px;
height: 100px;
box-shadow: 10px 10px black;
}

Текстовые эффекты • Про CSS

В посте представлены некоторые эффекты на основе text-shadow.

text-shadow — это свойство, описывающее тень, отбрасываемую текстом. В отличие от box-shadow, тень не обрезается фигурой, ей нельзя задать размер (только радиус размытия) и она не поддерживает параметр inset, то есть нельзя сделать внутреннюю тень.

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

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстом примеров, чтобы увидеть эффекты при наведении.

Выпуклый текст

h2 {
  text-shadow:
    1px 1px 1px silver,
    -1px 1px 1px silver;
  color: white;
  transition: all .5s;
}

h2:hover {
  text-shadow:
    -1px -1px 1px silver,
    1px -1px 1px silver;
  color: white;
}

Вдавленный текст

h2 {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #222;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #1A1A1A;
}

Размытие

h2 {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 0 0 15px #999;
  color: transparent;
  transition: all .5s;
}

h2:hover {
  text-shadow: 0 0 0 #333;
}

Контуры

h2 {
  text-shadow:
    1px 1px 0 orange,
    1px -1px 0 orange,
    -1px 1px 0 orange,
    -1px -1px 0 orange;
  color: white;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px 0 yellowgreen,
    1px -1px 0 yellowgreen,
    -1px 1px 0 yellowgreen,
    -1px -1px 0 yellowgreen;
  }

h2 {
  text-shadow:
    -1px -1px #FFF,
    -2px -2px #FFF,
    -1px 1px #FFF,
    -2px 2px #FFF,
    1px 1px #FFF,
    2px 2px #FFF,
    1px -1px #FFF,
    2px -2px #FFF,
    -3px -3px 2px #BBB,
    -3px 3px 2px #BBB,
    3px 3px 2px #BBB,
    3px -3px 2px #BBB;
  color: steelblue;
  transition: all 1s;
}

h2:hover {
  color: yellowgreen;
}

Для создания контура вокруг текста можно воспользоваться SCSS-функцией.

Длинные тени

h2 {
  text-shadow:
    1px 1px 0 hsl(20,100%,50%),
    2px 2px 0 hsl(20,100%,50%),
    3px 3px 0 hsl(35,100%,50%),
    4px 4px 0 hsl(35,100%,50%),
    5px 5px 0 hsl(45,100%,50%),
    6px 6px 0 hsl(45,100%,55%),
    7px 7px 0 hsl(55,100%,60%),
    8px 8px 0 hsl(55,100%,65%);
  color: hsl(0,100%,40%);
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px -1px 0 hsl(290,100%,40%),
    2px -2px 0 hsl(290,100%,40%),
    3px -3px 0 hsl(280,100%,60%),
    4px -4px 0 hsl(280,100%,60%),
    5px -5px 0 hsl(270,100%,75%),
    6px -6px 0 hsl(270,100%,80%),
    7px -7px 0 hsl(260,100%,85%),
    8px -8px 0 hsl(260,100%,90%);
  color: hsl(300,100%,30%);
}

Полосатая тень

h2 {
  display: inline-block;
  position: relative;
  letter-spacing: .05em;
  text-shadow:
    1px 1px mediumturquoise,
    -1px 1px mediumturquoise,
    -1px -1px mediumturquoise,
    1px -1px mediumturquoise;
  color: white;
  transition: all 1s;
}

h2:before {
  content: "";
  position: absolute;
  top: 10px;
  right: -15px;
  bottom: -15px;
  left: 0;
  z-index: -1;
  background: linear-gradient(
    -45deg,
    rgba(72, 209, 204, 0) 2px,
    mediumturquoise 3px,
    rgba(72, 209, 204, 0) 3px )
    repeat;
  background-size: 4px 4px;
}

h2:after {
  content: attr(data-name);
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -2;
  text-shadow:
    1px 1px white,
    2px 2px white,
    3px 3px white,
    4px 4px white;
  color: white;
  transition: all 1s;
}

h2:hover {
  color: lemonchiffon;
}

h2:hover:before {
  animation: 5s move_lines infinite linear;
}

h2:hover:after {
  color: lemonchiffon;
  text-shadow:
    1px 1px lemonchiffon,
    2px 2px lemonchiffon,
    3px 3px lemonchiffon,
    4px 4px lemonchiffon;
}

@keyframes move_lines {
  100% {
    background-position: 40px 40px;
  }
}

Идея не моя, найдено тут: codepen.io/lbebber/pen/BzoHi

Живое подчеркивание

h2 {
  display: inline-block;
  text-shadow:
    1px 1px 1px white,
    1px -1px 1px white,
    -1px 1px 1px white,
    -1px -1px 1px white;
  color: steelblue;
  transition: all 1s;
}

h2:after {
  content: "";
  display: block;
  position: relative;
  z-index: -1;
  width: 100%;
  margin: auto;
  border-bottom: 3px solid steelblue;
  bottom: .15em;
  transition: all 1s;
}

h2:hover:after {
  width: 0%;
  border-bottom-width: 1px;
}

Подводка

h2 {
  text-shadow:
    1px 1px white,
    2px 2px #777;
  color: #333;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px white,
    2px 2px tomato;
  color: crimson;
}

Разъезжающийся текст

h2 {
  overflow: hidden;
  text-shadow:
    0 0 tomato,
    0 0 yellowgreen,
    0 0 skyblue;
  color: transparent;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -400px 0 tomato,
    400px 0 yellowgreen,
    0 0 skyblue;
  }

Генератор текстовых теней CSS онлайн

Предварительный просмотр

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

Неон

Пылающий

Люкс

Гладкий

Ретро

Светящийся

Тактильные

Новости

Конфеты

Плавающий

80-х

Дальний

Наброски

Любовь

Вставка

Блоки

Могила

Цельный

Мультфильм

Вегас

комикс

глубокий

Мумия

Герой

Дракула

Размытые

Эмбосс

Пресс

Вырезать

Призрак

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

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

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

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

Совет разработчика

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

теней | HTML Dog

Коробка теней

box-shadow — это стандартное свойство CSS, которое поможет вам начать работу, и оно может иметь значение, состоящее из нескольких частей:

 
box-shadow: 5px 5px 3px 1px # 999
  

• Первое значение — это горизонтальное смещение — насколько тень смещается вправо (или влево, если оно отрицательное).
• Второе значение — это вертикальное смещение — насколько тень смещается вниз (или вверх, если оно отрицательное).
• Третье значение — это радиус размытия — чем выше значение, тем менее резкая тень.(«0» абсолютно чётко). Это необязательно — его отсутствие эквивалентно установке «0».
• Четвертое значение — это расстояние распространения — чем выше значение, тем больше тень («0» — унаследованный размер блока). Это также необязательно — его отсутствие эквивалентно установке «0».
• Пятое значение — цвет . Это тоже необязательно.

Ссылка на нас!
Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

Внутренние тени

Вы также можете применить тени к внутренней части коробки, добавив «вставку» в список:

 
box-shadow: вставка 0 0 7px 5px #ddd;
  

Великолепно!

Базовая тень и внутренняя тень.

Вы можете встретить версии box-shadow для конкретных браузеров, такие как -moz-box-shadow и -webkit-box-shadow . Игнорируйте их. Они старые и глупые. Большинство современных браузеров понимают box-shadow , включая Internet Explorer версии 9 и выше.

Тени текста

box-shadow , как следует из названия, имеет только глазки для коробок. Непостоянный зверь. Но вы также можете применить тени к контуру текста с помощью (сюрприз!) text-shadow :

 
тень текста: -2px 2px 2px # 999;
  

Аналогично box-shadow:

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

Обратите внимание, что для тени текста нет опции расстояния распространения или вставки.

text-shadow браузеру потребовалось немного больше времени, чтобы понять это. Internet Explorer 9 и более ранние версии этого не понимают, поэтому мы рекомендуем использовать его только в некритических ситуациях.

Генератор теней текста CSS3 — CSS3gen

Используйте этот генератор тени текста CSS3, чтобы легко добавлять стили тени текста в
ваш веб-проект.

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

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

Смотри, мама, без изображений!

Сгенерированный CSS:

Объяснение тени текста

Свойство CSS3 text-shadow — один из самых популярных методов постепенного улучшения дизайна веб-сайта.
Хотя изначально он входил в спецификацию CSS 2.1, он был отозван из-за отсутствия поддержки. Однако теперь он вернулся в CSS 3
и имеет широкую поддержку среди современных браузеров.

Свойство text-shadow действительно просто в использовании. Синтаксис следующий:

#myDiv {
тень текста: 1px 2px 3px # 666;
}

Он принимает четыре значения: первое значение определяет расстояние тени по оси x (по горизонтали), второе значение устанавливает расстояние по оси y (по вертикали),
третье значение определяет размытие тени, а последнее значение устанавливает цвет.

Хотя это относительно легко запомнить по сравнению с другими правилами CSS3, такими как border-radius,
полезно иметь такой генератор, чтобы вы могли генерировать текстовую тень в реальном времени и
Настройте его с помощью элементов управления в стиле Photoshop.

Поддерживающие браузеры

На момент написания следующие браузеры поддерживают свойство CSS3 text-shadow :

Тень текста CSS: пошаговое руководство

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

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

Тень текста CSS

Тени — это один из способов отличить элемент на веб-странице. Например, строка текста с зеленой тенью с большей вероятностью привлечет внимание пользователя, чем стандартная строка черного текста.

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

Найди свой матч на тренировочном лагере

• Карьера Карма подойдет вам с лучшими техническими учебными курсами
• Получите эксклюзивные стипендии и подготовительные курсы

Базовый синтаксис свойства text-shadow следующий:

 text-shadow: смещение-x, смещение-y, радиус размытия, цвет; 

Синтаксис свойства text-shadow аналогичен синтаксису свойства box-shadow, которое используется для применения теней к блочным элементам HTML.Чтобы узнать больше о тенях блоков в CSS, прочтите наше руководство для начинающих по теням блоков в CSS.

Вот основные компоненты синтаксиса свойства text-shadow:

• offset-x — горизонтальное (по оси x) смещение тени (обязательно).
• offset-y — вертикальное смещение (по оси Y) тени (обязательно).
• радиус размытия — это радиус эффекта размытия тени (необязательно).
• цвет — это цвет тени. Цвет по умолчанию для тени текста — черный (необязательно).

Давайте рассмотрим несколько примеров свойства text-shadow в действии, чтобы проиллюстрировать, как использовать это свойство для создания собственных теней текста. В этом руководстве мы будем использовать следующий элемент HTML:

 

 Карьерная карма 

<стиль>

h2 {
цвет: светло-голубой;
} 

Нажмите кнопку

в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.

Когда мы запускаем наш код, отображается элемент

, который представляет на экране текст

Career Karma .

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

lightblue . Это означает, что наш заголовок отображается в виде голубого текста.

Тень основного текста

При работе со свойством text-shadow необходимо указать только два обязательных атрибута: offset-x и offset-y. Если мы укажем эти два свойства, мы можем создать текст с горизонтальной и вертикальной тенью.

Вот пример свойства text-shadow с указанными обоими значениями:

 

 Карьерная карма 

<стиль>

h2 {
текстовая тень: 1px 1px;
} 

Нажмите кнопку

в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.

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

Цвета теней

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

Предположим, мы хотим, чтобы наша тень была светло-розовой. Мы можем изменить цвет нашей тени на розовый, используя этот код:

 

 Карьерная карма 

<стиль>

h2 {
тень текста: 1px 1px розовый;
} 

Нажмите кнопку

в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.

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

Размытые тени

Свойство text-shadow можно использовать в сочетании с атрибутом blur-radius для создания размытой тени.

Теперь предположим, что мы хотим создать тень, которая смещена на 3 пикселя как по горизонтальной, так и по вертикальной осям и имеет эффект размытия 2 пикселя вокруг тени. Мы могли бы создать эту тень, используя следующий код:

 

 Карьерная карма 

<стиль>

h2 {
тень текста: 3px 3px 2px розовый;
} 

Нажмите кнопку

в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.

Как видите, наша тень смещена на 3 пикселя по обеим осям, а наша тень окружена эффектом размытия. Чтобы усилить эффект размытия, мы могли бы увеличить значение атрибута blur-radius. Если нам нужна более размытая тень, мы могли бы установить значение blur-radius на 5 пикселей или 10 пикселей или выше, в зависимости от того, какое размытие мы хотим использовать. В этом примере наша тень розовая.

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

До сих пор мы обсуждали, как использовать свойство text-shadow для применения одной тени к блоку текста.Однако свойство text-shadow также можно использовать для добавления нескольких теней к текстовому элементу.

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

 тень текста: shadowOne, shadowTwo; 

Вы можете указать столько теней, сколько хотите, при условии, что каждая тень разделяется запятой. Однако значения x-offset и y-offset, которые вы указываете для каждой тени, должны со временем увеличиваться, в противном случае ваши тени будут перекрываться и могут быть не видны.

Тени появятся в том порядке, в котором они указаны. Итак, shadowOne появится перед shadowTwo.

Предположим, мы хотим создать текстовый баннер с розовыми и оранжевыми тенями позади текста. Мы могли бы сделать это с помощью этого кода:

 

 Карьерная карма 

<стиль>

h2 {
text-shadow: 3px 3px 2px розовый, 6px 6px 5px оранжевый;
} 

Нажмите кнопку

в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.

В нашем коде мы указали две тени. Вот значения, которые мы указали для каждой из наших теней:

Как видите, в нашем коде мы создали две тени, каждая с разными значениями.

Заключение

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

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

CSS тень текста — TutorialBrain

На главную »CSS» Тень текста CSS

CSS Text Shadow — это способ создания тени вокруг текста.

Итак, если вы хотите создать текст CSS с помощью тени, используйте свойство CSS text-shadow .

Это то же самое, что тень шрифта CSS.

Синтаксис CSS Text shadow:
1) text-shadow: h-offset v-offset радиус размытия;
2) тень текста: начальная;
3) тень текста: наследование;
4) тень текста: нет;

• h-offset — горизонтальное смещение для установки горизонтальной тени текста.
• v-offset — вертикальное смещение для установки вертикальной тени текста.
• радиус размытия — степень размытия, при которой текст выглядит нечетким.

Цвет

• устанавливает определенный цвет для тени текста.

Предупреждение / Опасность / Информация

×
Закрыть оповещение

Пример 1 — Использование смещения по горизонтали и вертикали

.text_shadow_offset {
  тень текста: 2px 1px;
}
 

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

Пример 2 — Использование радиуса размытия

 .text_shadow_No_blur_radius {
  тень текста: 1px 0.8px;
}

.text_shadow_blur_radius {
  тень текста: 1px 0.8px 5px;
}
 

Выберите хороший цвет для тени текста, чтобы он хорошо сочетался с идеей текста и веб-страницы.

 .text_shadow_no_color {
  тень текста: 1px 0.8px 2px;
}

.text_shadow_color {
  тень текста: 0px 0px 3px aqua;
}
 

Иногда можно также задать несколько теней для текста, разделив друг друга запятыми (,).

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

Используйте это только тогда, когда это действительно необходимо, иначе это может исказить внешний вид вашего текста.

Пример 4 — Множественные тени текста

 .single_text_shadow {
  тень текста: 0.5px 1.8px 1px Помидор;
}

.multi_text_shadow_2 {
  text-shadow: 0.5px 0.1em 0.5px Помидор, 3px 1px синий;
}

.multi_text_shadow_3 {
  text-shadow: 0.5px 0.1em 0.5px Помидор, 3px 1px синий, 6px 0px 1px желтый;
}
 

CSS тень текста

<стиль>
h2 {
семейство шрифтов: без засечек;
цвет белый;
текстовая тень:
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 в качестве единственного компонента значения своего свойства:

начальный

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

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

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

отключено

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

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

Начальное значение

нет

Применимо к

Все элементы

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

Есть

СМИ

Визуальный

Анимационный

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

Пример кода

/ * Одиночная тень * /
h2 {
тень текста: 4px 4px 8px синий;
}

/ * Множественные тени * /
h2 {
text-shadow: 4px 4px 8px синий, 8px -4px 8px оранжевый;
}

/ * Тень без указания цвета.Это будет использовать цвет текста. * /
h2 {
тень текста: 4px 4px 8px;
}

/ * Тень без указания радиуса или цвета размытия. * /
h2 {
тень текста: 4px 4px;
}

Официальные спецификации

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

CSS: тени текста

CSS: тени текста

См. Также указатель всех советов.

На этой странице:

Тени текста

CSS уровня 3 имеет свойство text-shadow для добавления тени.
к каждой букве некоторого текста. В простейшем виде это выглядит
что-то вроде этого:

h4 {text-shadow: 0.1em 0.1em # 333}
 

Добавляет темно-серую (# 333) тень немного правее
(0,1em) и вниз (0,1em) относительно обычного текста. Результат
выглядит так:

Ноак и барсикл

Тень нечеткого текста

Простейшая форма свойства text-shadow состоит из двух частей:
цвет (например, # 333 выше) и смещение (0.1em 0,1em в
пример выше). Это приводит к резкой тени на указанном
компенсировать. Но смещение также можно сделать нечетким, в результате
или менее размытая тень.

Величина нечеткости указывается в качестве другого смещения. Вот два
линии, одна с небольшой размытостью (0,05em) и одна с большим количеством
(0.2em):

h4.a {text-shadow: 0.1em 0.1em 0.05em # 333}
h4.b {text-shadow: 0.1em 0.1em 0.2em черный}
 

«Что скажешь?» сказал Великобритания

Чтобы видеть яснее

Читаемый белый текст

Тени могут сделать текст более читабельным, если контраст между
передний план и задний план небольшой.Вот пример белого
текст на бледно-голубом фоне, сначала без тени и
затем с помощью:

h4 {цвет: белый}
h4.a {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}
 

Без тени:

Что в этом для меня?

С тенью:

С лопатой и апельсинами

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

У вас также может быть несколько теней. В общем, это выглядит
довольно странно:

h4 {тень текста: 0.2em 0,5em 0,1em # 600,
      -0.3em 0.1em 0.1em # 060,
      0.4em -0.3em 0.1em # 006}
 

Но с двумя хорошо расположенными темными и светлыми тенями эффект может
быть полезным:

h4.a {text-shadow: -1px -1px белый, 1px 1px # 333}
h4.b {text-shadow: 1px 1px белый, -1px -1px # 444}
 

Я, Август (вы знаете кто)

Это, конечно, доплата

Это немного опасно, как вы можете видеть, если ваш браузер не
поддержка ‘text-shadow’.Фактически, цвета фона и
текст в этом примере почти такой же (#CCCCCC и # D1D1D1),
так что без теней почти нет контраста.

Рисование букв в виде контуров

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

h4 {text-shadow: -1px 0 черный, 0 1px черный,
      1px 0 черный, 0 -1px черный}
 

Вы краснеете?

Кот, яблоко и т. Д.

Это не идеальный план, и в настоящее время (август 2005 г.)
обсуждение вопроса о том, должен ли CSS иметь отдельный
свойство (или, возможно, значение для ‘text-decoration’), чтобы улучшить
очертания.

Неоновое свечение

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

h4.a {text-shadow: 0 0 0.2em # 8F7}
h4.b {text-shadow: 0 0 0.2em # F87, 0 0 0.2em # F87}
h4.c {text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F,
        0 0 0.2em # 87F}
 

С изюминкой самого лучшего

Нет ничего лучше, чем

Действительно, совершенно верно, мистер М

.