Объёмный текст при помощи CSS

Не так давно наткнуля на очень красивую реализацию объёмного текста при помощи 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 — создают эффект объёмности! А слои с нулевым смещением но не нулевым размытием задают эффект свечения. Если изменить цвета то будет похоже на неон 😉
Тасуйте слои как карты в калоде и всё получится, пусть и непроизвольно)

 

Похожий код:

Avatar photo
Алексей Петров

Программист, разработчик с 5 летним опытом работы. Учусь на разработчика игр на Unity и разработчика VR&AR реальности (виртуальной реальности). Основные языки программирования: C#, C++.

Оцените автора
Бла, бла код
Добавить комментарий