3D текст с помощью CSS

Небольшой трюк, как можно оформить любой элемент сайта в виде "трехмерного" текста совсем без графики, с помощью одного только CSS. Такое оформление будет хорошо смотреться на крупных надписях, например, на заголовках.

В основе лежит применение атрибута text-shadow, причем несколько раз. Каждый новый слой тени имеет более темный цвет и чуть-чуть сдвигается относительно предыдущего. В результате такого наложения получается иллюзия объемного текста. Вот так это выглядит в CSS:Затем в коде HTML достаточно просто применить этот класс к нужному элементу:Для мелких надписей количество слоев тени желательно уменьшить, так как большой сдвиг на них смотрится не очень хорошо. Готовый пример "трехмерного" текста вы можете посмотреть на демонстрационной страничке.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.