Как создать 3D текст при помощи CSS3


Вы уже, наверное, знакомы со свойством text-shadow спецификации CSS3. Свойство text-shadow поддерживается сейчас всеми современными браузерами. За исключением одного всеми любимого браузера. Извините, но если вы все еще пользуетесь браузером Internet Explorer, то вам, скорее всего, придется ждать следующего релиза, где возможно все же появится полноценная поддержка спецификаций CSS3 и HML5, и нам не придется приставлять к коду новые костыли для поддержки.

При помощи свойства text-shadow можно получать очень интересные эффекты, путем комбинирования этого свойства с различными параметрами. Это возможно благодаря тому, что мы можем назначать несколько свойств text-shadow для тегов и комбинируя несколько теней мы можем получать нужные нам эффекты.

При определенной доли изобретательности можно получить весьма интересные эффекты, например объемные текст, о котором речь и пойдет сегодня.

Эффект 3D достигается только за счет комбинирования свойств text-shadow. Ни какие другие элементы или изображения, или трюки не используются. Реализация происходит только за счет свойств text-shadow.

Не верите? Посмотрите на пример в Firefox, Chrome, Safari или Опера (пользователи IE пока ждут версии 10).

Как это выглядит

Посмотреть демо

Как создать 3D текст при помощи CSS3

Объем создается при помощи нескольких текстовых теней. Каждая из них имеет нулевое значение степени размытия и смещена относительно предыдущей тени на некоторое расстояние. Первая тень также смещена от текста. Рисунок ниже показывает, каким образом построены слои, но в реальном примере, цвета всех теней одинаковы и расстояние смещения не более 1 пикселя, что и создает эффект объема:

В конце применим несколько размытых теней для того, чтобы сделать 3D-эффект более реалистичным. Окончательный CSS:

p.threeD
{
	font-size: 4em;
	font-weight: bold;
	text-align: center;
	margin: 1em 0;
	color: #fff;
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}

Получаем красивый 3D эффект без использования дополнительных элементов. Вам лишь нужно напечатать немного больше текста. Создание отличного от приведенного примера текста потребует от вас минимума усилий. Единственное что хотелось бы добавить то возможность справиться с ослом и заставить его работать как нам нужно.

Спасибо за внимание.

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. sweb2719/11/2011

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

12 + 8 =