Не так давно наткнуля на очень красивую реализацию объёмного текста при помощи css. Всё делается при помощи свойства text-shadow путём добавления нескольких теней.
Итак:
text-shadow: x y radius color
- x — сдвиг тени по оси X
- y — сдвиг по оси Y
- radius — радиус размытия тени
- color — цвет тени
Умело манипулируем этим не сложным свойством и создаём причудливые эффекты объёма, свечения и т.п.
Создадим обёмную надпись. К примеру оформлять будем все теги h1 на странице.
Вот как сделан заголовок страницы на этом сайте:
h1 {
color: #FFFFFF;
font: bold 30px ‘Neucha’, arial, helvetica, sans-serif;
margin: 0;
text-shadow: 1px 0 0 #ccc,
2px 0 0 #c9c9c9,
0 1px 0 #ccc,
3px 1px 0 #c9c9c9,
0 0 10px #ccc,
5px 0 10px #ссс,
10px -3px 10px #ccc;
}
Заметьте, что мы задаём несколько теней (точнее 7) при этом каждый раз задаём различные параметры смещения и радиус размытия. Можно также для каждого слоя задавать свой цвет.
Те «слои» где был задан радиус смещения 0 — создают эффект объёмности! А слои с нулевым смещением но не нулевым размытием задают эффект свечения. Если изменить цвета то будет похоже на неон 😉
Тасуйте слои как карты в калоде и всё получится, пусть и непроизвольно)
