Box-shadow generator

04/02/2018
Konstantin Ostrovsky

Ссылка для ленивых

Существует множество сервисов для генерации  CSS кода теней, но этот на мой взгляд является наиболее удобным и главное дает кроссбраузерный код.

Хочу напомнить, что если вы умеете работать с веб-инспектором браузера, то Вы должны знать что в нем есть отличная встроенная функция для настройки параметров тени. Для ее использования нужно написать атрибут тени box-shadow и задать ему начальное значение, далее можно производить настройку при помощи визуального редактора.

box-shadow in web inspector

Но так как среди верстальщиков много ленивых людей, которые не хотят запоминать порядок аргументов, у данного сервиса всегда будет много трафика.

Немного теории для тех кто только знакомится с CSS:

Описание свойства box-shadow

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Синтаксис

box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

 А вот и сам сервис для генерации box-shadow