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

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

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

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

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

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

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

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

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

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

3D текст

Эффект 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/



Запись опубликована в рубрике CSS3 с метками , , , , , , , . Добавьте в закладки постоянную ссылку.

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

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

  2. Княгиня говорит:

    Ох, вот это классно! Жаль, ие ни в каком виде это свойство не понимает. 🙁

  3. Atamovich говорит:

    Супер! У меня как раз сейчас задание на стажировке: изучить html5 и css3 )))
    Так что на ближайшее время я живу на твоем сайте 😉

  4. Neo Lanser говорит:

    Воопще прикольные эфекты получаются!

  5. Lil Epic говорит:

    Интересный вид реализации text-shadow, творчески.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *