Генератор на box-shadow

Како да го користите генераторот на 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 blur spread color.

• x и y ја поместуваат сенката надесно и надолу. Негативните вредности ја движат налево и нагоре. Извор на светлина над елементот значи позитивно y.
• Blur (заматување) го омекнува работ. Не може да биде негативно. Заматување 0 дава копија на кутијата со остри рабови.
• Spread (ширење) ја зголемува (позитивно) или намалува (негативно) сенката пред да се замати. Негативно ширење со големо y ја држи сенката под елементот наместо околу него.
• Бојата обично носи провидност. Оваа алатка ги запишува непровидните бои како HEX, а проѕирните како rgba(), што го разбира секој прелистувач. Ако внесете боја што веќе има алфа канал, Провидност (%) го множи.
• inset ја става сенката внатре во рамката, како кутијата да е притисната во страницата.

Сенката го следи border-radius на елементот и никогаш не го менува распоредот: не зафаќа простор и не предизвикува лизгачи.

Зошто да се наредат повеќе сенки?

Вистинските сенки не се еден замаглен правоаголник. Мала, темна и тесна сенка стои веднаш под предметот, а голема, слаба и замаглена се шири подалеку. Редењето на два до пет слоја го имитира тоа и изгледа многу поприродно од една тешка сенка. Обликот Слоевита го удвојува поместувањето и заматувањето на секој чекор со ниска провидност, техника популаризирана од многу дизајн-системи. Подигнатост ги имитира сенките со три слоја од Material Design.

Првиот слој во листата се исцртува над другите, точно како во CSS вредноста. Редоследот е важен главно кога мешате inset и надворешни сенки или користите јаки бои.

Неуморфизам

Неуморфизмот („мек UI“) користи две сенки на елемент што има иста боја како неговата позадина: темна поместена надолу и надесно и светла поместена нагоре и налево. Обликот Неуморфизам ги поставува двете бои на #e0e5ec. Имајте предвид дека овој стил има низок контраст, па копчињата изградени со него бараат јасна состојба на фокус и читливи ознаки.