Текст и CSS3: примеры эффектов с использованием text-shadow

Типографика — это то, с чем любят играться многие дизайнеры и веб-разработчики. С появлением свойства text-shadow в CSS3 с его помощью стали заменять эффект наложения тени в Photoshop. При чем тень в Photoshop использовалась по большей части для выделения определенного текста из общей массы. Свойство text-shadow позволяет нам делать более интересные вещи с текстом, а именно создавать определенные эффекты. Часть таких эффектов с текстом в CSS3 мы разбирали в предыдущих статьях: 7 простых эффектов для текста с использованием CSS3, Текст в CSS3 и 3D текст с помощью CSS. Сегодня мы добавим к этой коллекции еще несколько готовых эффектов, которые вы можете легко внедрить в свои проекты.

[adsense]

Синтаксис drop-shadow

На всякий случай вспомним синтаксис свойства CSS3 text-shadow.

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

Синтаксис text-shadow включает в себя 4 переменных: первые две устанавливают положение тени (горизонтальное и вертикальное), третий параметр задает величину размытия тени и четвертый цвет тени. Самое приятное состоит в том, что вы никак не ограничены применением одной тени — теней может быть сколько угодно и именно это позволяет создавать различные эффекты.

Текст в стиле ретро

В этом эффекте мы будем использовать четкое разделение текста и его тени. Эффект достигается с использованием двух теней — первая находиться максимально близко к самому тексту и по цвету совпадает с задним фоном для того, чтобы создать эффект отстраненности второй тени от текста.
А вот код:

text-shadow: 4px 4px 0px цвет_фона, 10px 10px 0px цвет_тени;

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

3D текст

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

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);

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

Обводка текста

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

text-shadow:-4px -2px 0 #fff;

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

Вот те интересные эффекты, которые позволяет нам создавать свойство CSS3 text-shadow. Ну а если вы не знаете что такое вебмани, то милости прошу на блог об этой платежной системе http://owebmoney.info/