Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
3D текст с помощью CSS
3D текст с помощью CSS

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

В основе лежит применение атрибута text-shadow, причем несколько раз. Каждый новый слой тени имеет более темный цвет и чуть-чуть сдвигается относительно предыдущего. В результате такого наложения получается иллюзия объемного текста. Вот так это выглядит в CSS:
  1. <style type="text/css">
  2. .text3d {
  3.     text-shadow:
  4.         0.1px 1.00px 0 #CCCCCC,
  5.         0.3px 1.75px 0 #C9C9C9,
  6.         0.5px 2.50px 0 #BBBBBB,
  7.         0.7px 3.25px 0 #B9B9B9,
  8.         0.9px 4.00px 0 #AAAAAA;
  9. }
  10. </style>
Затем в коде HTML достаточно просто применить этот класс к нужному элементу:
  1. <h1 class="text3d">3D text example</h1>
Для мелких надписей количество слоев тени желательно уменьшить, так как большой сдвиг на них смотрится не очень хорошо. Готовый пример "трехмерного" текста вы можете посмотреть на демонстрационной страничке.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 438 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.11 сек. / MySQL: 2 (0.0042 сек.) / Память: 4.75 Mb
Наверх