CSS-генератор теней

CSS Box Box Generator — это визуальный редактор для свойства CSS Box-Shadow. Вы можете настроить смещение, радиус размытия, радиус спреда, цвет и непрозрачность с помощью ползунков и видите результат в реальном времени на элементе предварительного просмотра, затем скопируйте точный CSS. Вместо того, чтобы угадывать значения пикселей и перезагружать страницу, вы напрямую формируете тень и читаете код, который она создает.

Откройте этот генератор теней коробки CSS, и он начинается на предустановке Карты, двух слоях, которые копируют как тень коробки: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a; Ползунок непрозрачности выпекается в шестигранный цвет, поэтому 10% становится 1a в конце. Нажмите на внутренний предустановку и объявление изменится на тень коробки: вставка 0px 2px 4px 0px #0000033; взгляд на нажатой кнопки. Добавить слой добавляет тень при 0px 4px 6px 0px #000033, указанную последней и окрашенную под другими.

Свойство тени коробок обманчиво глубоко. Одно объявление может складывать несколько теней, каждая со своими собственными смещениями, размытием, разбросом, цветом и необязательным ключевым словом, которое рисует тень внутри элемента, а не снаружи. Реальные тени интерфейса почти всегда используют два или более слоев, чтобы выглядеть естественно, что утомительно писать вручную. Этот инструмент управляет уровнями для вас и выводит объявление spec-valid в правильном порядке, разделенном запятыми.

Все происходит в вашем браузере. Выберите пресет, настройте слои, переключите предварительный просмотр между светлым и темным фонами и скопируйте либо стандартное свойство, либо блок, который также включает префикс -webkit-. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Тени нарисованы вне коробки и не занимают места, поэтому они никогда не толкают соседей вокруг и будут подрезаны любым предком с переливом скрыто Распространение является наименее понятным значением: он растет или сжимает теневую форму перед размытием, поэтому положительный разброс с нулевым размытием дает твердый контур смещения, который является как эффекты границы подделываются, не влияя на расположение.Вставка перемещает тень внутри элемента, полезная для нажатых состояний и внутренних свечений. Наслоение нескольких теней с увеличением смещения и размытия является тем, насколько убедительна глубина, так как одно большое размытие читается как туман, а не как тень. Каждый слой стоит времени рендеринга, а тени, которые перекрашиваются во время прокрутки или анимации, являются распространенным источником джанк на устройствах с меньшей мощностью.