Box Shadow Generator
Generate box shadows
Generate box shadows Запускается локально в вашем браузере
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Генератор Box Shadow создает тень на основе смещения, размытия, распространения, цвета и непрозрачности с помощью предварительного просмотра в реальном времени и CSS. Люди путают две настройки: размытие и размытие: размытие смягчает края формы тени наружу и внутрь, а размытие увеличивает или уменьшает собственный размер тени до того, как произойдет какое-либо размытие. Отрицательное распространение — это то, что не позволяет мягкой тени выглядеть как ореол, поэтому по умолчанию здесь используется небольшое отрицательное значение.
Where people use the
- Создание шкалы высот для карточек, модальных окон и меню.
- Создание нажатого или сфокусированного состояния с помощью вставленной тени.
- Смягчение границы без добавления реальной границы.
- Проверка того, как на самом деле выглядят значения теней спецификации дизайна.
How to use the
- 1
Установите смещения
Смещение X перемещает тень вправо, смещение Y перемещает ее вниз. Отрицательные значения перемещают его в другую сторону.
- 2
Установить размытие и распространение
Размытие смягчает края. Распространение расширяет тень перед размытием; используйте небольшой отрицательный разброс для тени, которая находится под элементом, а не вокруг него.
- 3
Выберите цвет и непрозрачность
Чистый черный цвет при полной непрозрачности выглядит резковато. Низкая непрозрачность, где-то между 8 и 20 процентами, воспринимается как глубина, а не грязь.
- 4
Отметьте вставку, если хотите внутреннюю тень.
Inset рисует тень внутри элемента, а не позади него, что подходит для нажатых состояний и колодцев.
- 5
Скопируйте CSS
Правило включает цвет RGBA, поэтому его можно вставить прямо в таблицу стилей.
Советы и лучшие практики
- Две многослойные тени выглядят намного лучше, чем одна густая.
- Следите за тем, чтобы источник света был постоянным: если одна карта выпадает вправо, то должны сделать это все.
- Следите за тем, чтобы тени обрезались родительским элементом со скрытым переполнением.
Часто задаваемые вопросы
В чем разница между размытием и распространением?
Распространение изменяет размер формы тени до смягчения: положительное значение для увеличения и отрицательное для сжатия. Затем размытие смягчает края на заданный радиус. Чтобы получить плотную тень под картой, вам нужно небольшое размытие и слегка отрицательный разброс.
Почему моя тень выглядит серой и грязной?
Потому что это чистый черный цвет с высокой непрозрачностью. Используйте низкую альфу, примерно от 0,08 до 0,2, и рассмотрите возможность тонирования тени в соответствии с оттенком фона, что будет выглядеть гораздо более естественно.
Могу ли я иметь более одной тени?
Да. Разделяйте несколько теней запятыми в одном объявлении; они складываются спереди назад, поэтому первый оказывается сверху. Многослойные тени — это то, как создаются мягкие и реалистичные возвышения.
Влияет ли тень блока на макет?
Нет. Тени рисуются за пределами рамки элемента и не занимают места, поэтому их можно обрезать родительским элементом со скрытым переполнением или плотным контейнером.
Дорого ли стоит анимировать тень блока?
Да, относительно. Изменение размытия или расширения заставляет браузер перерисовывать тень каждый кадр. Для плавного движения вместо этого анимируйте непрозрачность или трансформируйте, либо выполните перекрестное затухание между двумя предварительно визуализированными тенями.