Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.

text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.


	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	

Результат использования данного свойства будет выглядеть следующим образом:

Тень для текста

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.

Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.

Вдавленный текст

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

Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.


	body {
	    background: #222;
	}
	  
	#text h1 {
	    color: rgba(0,0,0,0.6);
	    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
	}
	
Вдавленный текст

Четкая тень

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.


	text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
	
Четкая тень

Двойная тень

Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!


	text-shadow: shadow1, shadow2, shadow3;
	

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.


	text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
	
Двойная тень

Смещение вниз на большое расстояние

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.


	text-shadow: 0px 3px 0px #b2a98f,
	             0px 14px 10px rgba(0,0,0,0.15),
	             0px 24px 2px rgba(0,0,0,0.1),
	             0px 34px 30px rgba(0,0,0,0.1);

Смещение вниз на большое расстояние

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.


	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
	             0px 8px 13px rgba(0,0,0,0.1),
	             0px 18px 23px rgba(0,0,0,0.1);

Смещение вниз на небольшое расстояние и сильное размытие

3D текст

Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.


	text-shadow: 0 1px 0 #ccc,
	               0 2px 0 #c9c9c9,
	               0 3px 0 #bbb,
	               0 4px 0 #b9b9b9,
	               0 5px 0 #aaa,
	               0 6px 1px rgba(0,0,0,.1),
	               0 0 5px rgba(0,0,0,.1),
	               0 1px 3px rgba(0,0,0,.3),
	               0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.25),
	               0 10px 10px rgba(0,0,0,.2),
	               0 20px 20px rgba(0,0,0,.15);

3D текст

Вдавленный текст


	background-color: #666666;
	    -webkit-background-clip: text;
	    -moz-background-clip: text;
	    background-clip: text;
	    color: transparent;
	    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Вдавленный текст

Свечение


	text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Свечение

Супергерой


	text-shadow: -10px 10px 0px #00e6e6,
	                 -20px 20px 0px #01cccc,
	                 -30px 30px 0px #00bdbd;

Супергерой

Множественные источники света


	text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
	                 10px 20px 5px rgba(0,0,0,0.05),
	                 -10px 20px 5px rgba(0,0,0,0.05);

Множественные источники света

Мягкое тиснение


	color: rgba(0,0,0,0.6);
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
	                 0px -5px 35px rgba(255,255,255,0.3);

Мягкое тиснение

Заключение

Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.

Поделитесь статьей со своими друзьями