text-shadow / CSS3

text-shadow - css3

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

Описание свойства text-shadow

Свойство text-shadow может иметь 4 значения для одной тени 2 из которых являются обязательными, а ещё два дополнительными. Теней может быть безграничное количество, каждая следующая тень разделяется от предыдущей запятой.

Варианты использования значений

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

Использование 2 значений

  1. Горизонтальное смещение
  2. Вертикальное смещение
text-shadow: 1em -1em;

Использование 3 значений

  1. Горизонтальное смещение
  2. Вертикальное смещение
  3. Цвет тени
text-shadow: -1em 1em #ccc;

Использование 3 значений

  1. Цвет тени
  2. Горизонтальное смещение
  3. Вертикальное смещение
text-shadow: #ccc 1em -1em;

Использование 3 значений

  1. Горизонтальное смещение
  2. Вертикальное смещение
  3. Эффект размытости
text-shadow: 1em 1em 1em;

Использование 4 значений

  1. Горизонтальное смещение
  2. Вертикальное смещение
  3. Величина размытости
  4. Цвет тени
text-shadow: 1em 1em 1em #888;

Использование 4 значений

  1. Цвет тени
  2. Горизонтальное смещение
  3. Вертикальное смещение
  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

3D тень для текста
<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, если найдётся время Вы сможете себе сделать красивую тень, ту которая нужна


Рейтинг: 5.0/5 из 5



Добавлено Автор Ник Источник Просмотров Комментариев Теги
07-09-2015 Михаил Меренков aTmpl © 566 тень, text-shadow, тень для букв, Shadow, эффект для текста, эффект для букв, тень для текста