Тени блоков добавляют глубину элементам пользовательского интерфейса, имитируя освещение и высоту. Хорошо продуманные тени создают визуальную иерархию и делают интерфейсы более тактильными.
Отрегулируйте смещение по горизонтали, смещение по вертикали, размытие, распространение, цвет и непрозрачность. Предварительный просмотр Canvas обновляется в режиме реального времени. Скопируйте CSS-код, если он вас устраивает.
Frequently Asked Questions
Q: В чем разница между размытием и распространением?
В чем разница между размытием и распространением? Размытие управляет мягкостью края тени. Распространение управляет тем, насколько расширяется тень.
Q: Сколько слоев теней мне следует использовать?
Сколько слоев теней мне следует использовать? Обычно достаточно 1-2 слоев. Используйте вставленные тени для внутренней глубины.
Q: Сколько слоев box-shadow мне следует использовать?
Сколько слоев box-shadow мне следует использовать? Профессиональные дизайнеры часто используют 2-4 слоя для глубины. Начните с небольшой плотной тени, добавьте среднюю растянутую тень и, при необходимости, добавьте большую окружающую тень. Инструмент поддерживает неограниченное количество слоев.
Q: Каково влияние box-shadow на производительность?
Каково влияние box-shadow на производительность? Несколько теней коробок оказывают незначительное влияние. Слишком много теней с сильным размытием может повлиять на производительность прокрутки на устройствах начального уровня. Инструмент показывает предварительный просмотр в реальном времени, чтобы вы могли оценить результат перед копированием.
Q: Могу ли я создавать внутренние тени (врезку)?
Могу ли я создавать внутренние тени (врезку)? Текущая версия фокусируется на внешних тенях. Для внутренних теней вручную добавьте ключевое слово «inset» в начало сгенерированного значения CSS box-shadow.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.