Слоёная тень для текста · Hsla Layer

Слоёная тень Hsla Layer

Тень применяемая к тексту создана с использованием цвета hsla, отбрасывается слоями создавая красивый эффект, может быть применена к любым текстовым элементам.

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

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

<style>
.text-shadow-red {
font-family:'Georgia';
font-size:7rem;
color:red;
text-shadow: 
0px 0px hsla(0, 30%, 60%, .5),
1px -1px hsla(0, 60%, 30%, .6),
2px -2px hsla(0, 30%, 60%, .7),
3px -3px hsla(0, 60%, 30%, .8),
4px -4px hsla(0, 30%, 60%, .9),
5px -5px hsla(0, 60%, 30%, 1.0);
}
</style>
<div class="text-shadow-red">Тень для текста</div>
Тень для текста

<style>
.text-shadow-red-1 {
font-family:'Georgia';
font-size:7rem;
color:red;
text-shadow: 
0px 0px hsla(0, 50%, 90%, .5),
1px -1px hsla(0, 60%, 50%, .6),
2px -2px hsla(0, 70%, 90%, .7),
3px -3px hsla(0, 80%, 50%, .8),
4px -4px hsla(0, 90%, 90%, .9),
5px -5px hsla(0, 100%, 50%, 1.0);
}
</style>
<div class="text-shadow-red-1">Тень для текста</div>
Тень для текста

<style>
.text-shadow {
font-family:'Georgia';
font-size:7rem;
color:#777;
text-shadow: 
0px 0px hsla(0, 5%, 90%, .5),
1px -1px hsla(0, 6%, 80%, .6),
2px -2px hsla(0, 7%, 90%, .7),
3px -3px hsla(0, 8%, 80%, .8),
4px -4px hsla(0, 9%, 90%, .9),
5px -5px hsla(0, 10%, 80%, 1.0);
}
</style>
<div class="text-shadow">Тень для текста</div>

Используйте генератор цветов для редактирования

Адаптивность шрифта с тенью для разных разрешений можно настроить используя свойство @media.

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


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



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