CSS Тень текста на светлом фоне · Yummy Text Shadow

Тень текста CSS - Yummy

Красивая тень Yummy делает текст более привлекательным благодаря использованию свойств CSS и отдельно text-shadow, данный способ накладывает тень на текст через атрибут data-text.

Применение тени для текста

Тень для текста
Тень для текста

<style>
.text-shadow {
color:#777;
font-size:5rem;
font-family:'Impact';
text-align:center;
}
.text-in:before,.text-out:before {
content:attr(data-text);
color:transparent;
text-shadow:1px 1px 2px #fff;
position:absolute;
z-index:1;
}
.text-out:before {
text-shadow:-1px -1px 2px #fff;
}
</style>
<div class="text-shadow text-in" data-text="Тень для текста">Тень для текста</div>
<div class="text-shadow text-out" data-text="Тень для текста">Тень для текста</div>

Содержимое текста, к которому применяется тень должно повторяться в атрибуте data-text="Текст", Вы можете внести изменения в редактор и посмотреть результат в реальном времени.

Редактор кода для изменений


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



Добавлено Автор Ник Источник Просмотров Комментариев Теги
10-01-2015 Михаил Меренков aTmpl © 439 0 css, text-shadow, тень для текста