вход

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

Как создать 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

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

  1. sweb27:

    Превосходные эффекты! если кому любопытно их в работе посмотреть, то реализовывал многое тут:) http://турист27.рф и тут интерессно http://турдв.рф

Оставить комментарий

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

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.