Описание свойства text-shadow
Свойство text-shadow может иметь 4 значения для одной тени 2 из которых являются обязательными, а ещё два дополнительными. Теней может быть безграничное количество, каждая следующая тень разделяется от предыдущей запятой.
Варианты использования значений
Существует несколько вариантов использования значений для одной тени, значение горизонтального и вертикального смещений могут иметь как положительные так и отрицательные значения. Если значение цвета не указывается, оно наследуется из указанного элементу, его можно добавить первым или последним значением, модель цвета может быть любой.
Использование 2 значений
- Горизонтальное смещение
- Вертикальное смещение
text-shadow: 1em -1em;
Использование 3 значений
- Горизонтальное смещение
- Вертикальное смещение
- Цвет тени
text-shadow: -1em 1em #ccc;
Использование 3 значений
- Цвет тени
- Горизонтальное смещение
- Вертикальное смещение
text-shadow: #ccc 1em -1em;
Использование 3 значений
- Горизонтальное смещение
- Вертикальное смещение
- Эффект размытости
text-shadow: 1em 1em 1em;
Использование 4 значений
- Горизонтальное смещение
- Вертикальное смещение
- Величина размытости
- Цвет тени
text-shadow: 1em 1em 1em #888;
Использование 4 значений
- Цвет тени
- Горизонтальное смещение
- Вертикальное смещение
- Величина размытости
text-shadow: #999 1em 1em 1em;
Использование нескольких теней
Каждая тень индивидуально накладывается на текст, без какой либо очерёдности или последовательности, наличие нескольких теней имеет совокупный вид. Значение размытости тоже влияет на ту тень которой указан.
Использование 2 теней
text-shadow: #999 1em 1em 1em, #999 1em 1em 1em;
Использование 3 теней
text-shadow: #999 1em 1em 1em, #888 -1em -1em 1em, -1em -1em 1em #777;
Готовые примеры теней
Перед началом демонстрации примеров подготовим собственный тег <text> чтобы не наследовались значения из стилей сайта, что в принципе не противоречит правилам HTML, главное объективнее описать его состояние свойствами CSS.
<style>
text {
display:block;
orphans: 3;
widows: 3;
page-break-after: avoid;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
font-size: 30px;
text-align:center;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<text class="text-center">Подготовка нового тега</text>
Готовый пример №1
<style>
text.demonstration-text-in {
font-size:4em;
color:#666666;
}
text.demonstration-text-in:before {
content:attr(data-text-demonstration);
color:transparent;
text-shadow:1px 1px 2px #fff;
position:absolute;
}
</style>
<text class="demonstration-text-in" data-text-demonstration="Красивая тень для текста">Красивая тень для текста</text>
Готовый пример №2
<style>
.demo-text-2 {
text-shadow: 0px 1px 0px #CCC, 0px 2px 0px #C9C9C9, 0px 3px 0px #BBB, 0px 4px 0px #B9B9B9, 0px 5px 0px #AAA, 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 20px 20px rgba(0, 0, 0, 0.15)
}
</style>
<text class="text-center demo-text-2">3D тень для текста</text>
Готовый пример №3
<style>
.demo-text-3 {
color:rgb(221, 221, 221);
font-weight:bold;
font-size:3em;
text-shadow:1px 1px 3px #666666, -1px -1px 3px #ffffff, 1px 1px #666, -1px -1px #ffffff;
}
</style>
<text class="text-center demo-text-3">Выпуклый текст с тенью</text>
Готовый пример №4
<style>
.demo-text-4 {
color:rgb(170, 170, 170);
font-weight:bold;
font-size:3em;
text-shadow: 1px 1px 2px #FFF, 0px 0px 0px #000, 1px 1px 2px #FFF;
}
</style>
<text class="text-center demo-text-4">Тень вдавленный текст</text>
Готовый пример №5
<style>
.demo-text-5 {
color:rgb(102, 102, 102) ;
font-weight:bold;
font-size:2em;
letter-spacing:2px;
text-shadow:1px 1px #ffffff, 2px 2px rgb(102, 102, 102);
}
</style>
<text class="text-center demo-text-5">Двойная тень текста</text>
Готовый пример №6
<style>
.demo-text-6 {
color:#515151;
font-weight:bold;
font-size:2em;
text-decoration:none;
text-shadow:3px 3px 3px #777777;
}
.demo-text-6:hover{
position:relative;
top:1px;
left:1px;
text-shadow:1px 1px 2px #555555;
}
</style>
<text class="text-center demo-text-6">Эффект тени при наведении</text>
Готовый пример №7
<style>
.demo-text-7 {
-webkit-animation: text 1s ease alternate infinite;
-moz-animation: text 1s ease alternate infinite;
-ms-animation: text 1s ease alternate infinite;
-o-animation: text 1s ease alternate infinite;
animation: text 1s ease alternate infinite;
}
@-webkit-keyframes text {
0% {
-webkit-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow: 1px 1px 0px rgb(223, 223, 223), 2px 2px 0px rgb(185, 185, 185);
}
}
@-ms-keyframes text {
0% {
-ms-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow: 1px 1px 0px rgb(223, 223, 223), 2px 2px 0px rgb(185, 185, 185);
}
}
@keyframes text {
0% {
transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow: 1px 1px 0px rgb(223, 223, 223), 2px 2px 0px rgb(185, 185, 185);
}
}
</style>
<text class="text-center demo-text-7">Движущийся текст с тенью</text>
Настроить тень для текста самому
Попробуйте вносить свои изменения, редактор поддерживает любые свойства CSS и HTML теги, дополнительно оснащён библиотекой jQuery и плагином Bootstrap.
► Нажмите на значёк 
в редакторе для показа результата.
Генератор теней для текста
Поэксперименируйте с тенями ипользуя наш Генератор text-shadow Bootstrap, если найдётся время Вы сможете себе сделать красивую тень, ту которая нужна