Красивый эффект длинной тени для текста на CSS
Длинные тени — популярный эффект, часть тенденции «плоского дизайна», довольно часто применяется в веб-дизайне, на элементах дизайна интерфейса, иконках и тексте. Сейчас для создания различных эффектов теней текста, нет необходимости использовать Photoshop, достаточно одного лишь простого свойства text-shadow из обоймы CSS.
Чтобы проиллюстрировать это, подготовил парочку простых примеров использования свойства text-shadow, для создания стильных эффектов длинной тени для текста. Экспериментируя со значениями этого свойства, вы сможете легко создать свой уникальный теневой эффект.
В каждом примере показан результат и весь фарш html/css, особых пояснений, думаю не требуется, остановлюсь лишь на некоторых деталях.
Например, для размера шрифта использовал относительную единицу измерения vw, т.е. в таком случае, размер шрифта вычисляется относительно окна просмотра браузера (вьюпорта), а значит шрифт всегда будет выглядеть корректно при изменении пользователем размера окна браузера(мобильного или десктопного).
Так же для достижения эффекта длинной тени использовалось несколько параметров тени, разделённых меду собой запятой. Напомню, что согласно спецификации CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.
Действительно классно. Даже не предполагал, вернее фантазии не хватило. В общем — спасибо. Пойду ещё рекламу посмотрю.