Генератор на сенки (CSS box-shadow)

Как да използвате генератора на сенки

1. Започнете от готов стил или оставете стандартната Мека сянка. Редът Готови стилове предлага Мека, Рязка, Многослойна, Издигане, Неоморфизъм, Вътрешна и Сияние.
2. В Слоеве на сянката щракнете върху слой, за да го изберете. Всеки слой можете да местите с Премести нагоре и Премести надолу или да изтриете с Премахни. Добави слой дублира избрания слой, така че да нагласите копие.
3. Редактирайте избрания слой под Редактиране на избрания слой: плъзнете точката в полето Отместване или използвайте плъзгачите и числовите полета за Хоризонтално отместване (px), Вертикално отместване (px), Размазване (px) и Разширение (px).
4. Изберете Цвят на сянката с палитрата или въведете произволен CSS цвят в полето за код, после задайте Непрозрачност (%). Отметнете Вътрешна сянка (inset), за да се рисува сянката вътре в блока.
5. Настройте Настройки на прегледа (Цвят на блока, Цвят на фона, Радиус на ъглите (px)), за да видите сянката върху вашите реални цветове. Те влияят само на прегледа.
6. Копирайте декларацията от CSS код с бутона Копирай.

Клавиатура: фокусирайте точката в полето Отместване и използвайте стрелките, за да я преместите с 1 px, или с 10 px при натиснат Shift.

Инструментът работи във вашия браузър. Нищо от въведеното не се изпраща към сървър.

Как работи box-shadow

Синтаксисът на една сянка е box-shadow: [inset] x y размазване разширение цвят.

• x и y местят сянката надясно и надолу. Отрицателните стойности я местят наляво и нагоре. Източник на светлина над елемента означава положително y.
• Размазването омекотява ръба. Не може да е отрицателно. Размазване 0 дава копие на блока с остри краища.
• Разширението уголемява (положително) или смалява (отрицателно) сянката преди размазването. Отрицателно разширение с голямо y задържа сянката под елемента, вместо около него.
• Цветът обикновено носи прозрачност. Този инструмент записва непрозрачните цветове като HEX, а полупрозрачните като rgba(), което разбират всички браузъри. Ако въведете цвят, който вече има алфа канал, Непрозрачност (%) го умножава.
• inset поставя сянката вътре в рамката, сякаш блокът е вдлъбнат в страницата.

Сянката следва border-radius на елемента и никога не променя оформлението: не заема място и не предизвиква ленти за превъртане.

Защо да наслагваме няколко сенки?

Истинските сенки не са един размазан правоъгълник. Малка, тъмна и плътна сянка стои точно под обекта, а голяма, бледа и размазана се разстила по-далеч. Наслагването на два до пет слоя имитира това и изглежда много по-естествено от една тежка сянка. Стилът Многослойна удвоява отместването и размазването на всяка стъпка при ниска непрозрачност, техника, популяризирана от много дизайн системи. Издигане имитира трислойните сенки на Material Design.

Първият слой в списъка се рисува най-отгоре, точно както в CSS стойността. Редът има значение най-вече когато смесвате вътрешни и външни сенки или използвате наситени цветове.

Неоморфизъм

Неоморфизмът („мек интерфейс“) използва две сенки върху елемент, който е в същия цвят като фона си: тъмна, отместена надолу и надясно, и светла, отместена нагоре и наляво. Стилът Неоморфизъм задава и двата цвята на #e0e5ec. Имайте предвид, че този стил има нисък контраст, затова бутоните, направени с него, се нуждаят от ясно състояние при фокус и четливи надписи.