Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Красивый эффект длинной тени для текста на CSS

Длинные тени — популярный эффект, часть тенденции «плоского дизайна», довольно часто применяется в веб-дизайне, на элементах дизайна интерфейса, иконках и тексте. Сейчас для создания различных эффектов теней текста, нет необходимости использовать Photoshop, достаточно одного лишь простого свойства text-shadow из обоймы CSS.

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

1. Текст с длинной тенью на светлом фоне

Всего комментариев: 1

  • Сергей: 31 марта, 2019 в 19:27

    Действительно классно. Даже не предполагал, вернее фантазии не хватило. В общем — спасибо. Пойду ещё рекламу посмотрю.

    Ответить

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>