Card Shadow CSS — Изтънчен код за сянка на кутия
Създайте CSS код за сянка на кутия визуално: плъзгачи за отместване, замъгляване, разпространение, цвят с непрозрачност, режим на вмъкване и до четири слоя с преглед на живо.
Резултат
Тази страница отваря предварително зададения генератор на сянка на кутия на класическа сянка на карта: 2px надолу, 8px замъгляване, 15% черно непрозрачност. Преднамерено е тих — достатъчно, за да отдели карта от страницата, без да се оповестява — и визуализацията показва точно колко тих.
Този диапазон съответства на най-ниските стъпки на издигане в повечето системи за проектиране: карти със списъци, падащи менюта, изскачащи елементи и редове на таблици при задържане. Ако се нуждаете от по-силно повдигане за модални или плаващи панели, увеличете отместването на Y и замъглете заедно — те трябва да растат пропорционално, за да поддържате източника на светлина правдоподобен.
Копирайте линията на кутия-сянка във вашите стилове на компоненти или я дублирайте като втори слой с по-плътно размазване, за да добавите дефиниране на ръба. Инструментът е безплатен и работи изцяло във вашия браузър.