CSS box-shadow generátor

A box-shadow generátor használata

1. Indulj egy előbeállításból, vagy hagyd meg az alapértelmezett Lágy árnyékot. Az Előbeállítások sorban ezeket találod: Lágy, Kemény, Rétegzett, Emelkedés, Neumorfizmus, Belső és Fénylő.
2. Az Árnyékrétegek között kattints egy rétegre a kijelöléséhez. Minden réteget mozgathatsz a Feljebb és a Lejjebb gombbal, vagy törölhetsz az Eltávolítás gombbal. A Réteg hozzáadása a kijelölt réteg másolatát hozza létre, így egy másolatot finomhangolhatsz.
3. A kijelölt réteget az A kijelölt réteg szerkesztése részben szerkesztheted: húzd a pontot az Eltolás mezőben, vagy használd a csúszkákat és számmezőket a Vízszintes eltolás (px), Függőleges eltolás (px), Elmosás (px) és Terjedés (px) értékekhez.
4. Válassz Árnyék színe értéket a színválasztóval, vagy írj be bármilyen CSS-színt a kódmezőbe, majd állítsd be az Átlátszatlanság (%) értéket. Jelöld be a Belső árnyék (inset) opciót, ha az árnyékot a dobozon belülre szeretnéd rajzolni.
5. Az Előnézeti beállítások (Doboz színe, Háttér színe, Sarokkerekítés (px)) módosításával a valódi színeiden láthatod az árnyékot. Ezek csak az előnézetre hatnak.
6. A CSS-kód deklarációt a Másolás gombbal másolhatod ki.

Billentyűzet: fókuszálj az Eltolás mező pontjára, és a nyílbillentyűkkel 1 px-szel, Shifttel 10 px-szel mozgathatod.

Hogyan működik a box-shadow?

Egyetlen árnyék szintaxisa: box-shadow: [inset] x y blur spread color.

• Az x és y jobbra és lefelé tolja az árnyékot. A negatív értékek balra és felfelé tolják. Ha a fényforrás az elem felett van, az y pozitív.
• A blur (elmosás) lágyítja a szélét. Nem lehet negatív. A 0 elmosás a doboz éles szélű másolatát adja.
• A spread (terjedés) az elmosás előtt növeli (pozitív) vagy csökkenti (negatív) az árnyékot. Negatív terjedés és nagy y érték együtt az elem alatt tartja az árnyékot ahelyett, hogy körülvenné.
• A szín általában átlátszóságot is hordoz. Az eszköz a tömör színeket HEX-ként, az áttetszőket rgba() formában írja ki, amit minden böngésző ért. Ha olyan színt írsz be, amelynek már van alfa csatornája, az Átlátszatlanság (%) megszorozza azt.
• Az inset az árnyékot a szegélyen belülre teszi, mintha a dobozt belenyomták volna az oldalba.

Az árnyék követi az elem border-radius értékét, és sosem változtatja az elrendezést: nem foglal helyet, és nem hoz létre görgetősávot.

Miért érdemes több árnyékot rétegezni?

A valódi árnyékok nem egyetlen elmosott téglalapok. Egy kicsi, sötét, éles árnyék közvetlenül az objektum alatt van, egy nagy, halvány, elmosódott pedig távolabb terjed. Két-öt réteg egymásra helyezése ezt utánozza, és sokkal természetesebben hat, mint egyetlen nehéz árnyék. A Rétegzett előbeállítás minden lépésben megduplázza az eltolást és az elmosást alacsony átlátszatlansággal; ezt a technikát számos dizájnrendszer tette ismertté. Az Emelkedés a Material Design háromrétegű árnyékait utánozza.

A lista első rétege van a többi felett, pontosan úgy, mint a CSS-értékben. A sorrend főleg akkor számít, ha belső és külső árnyékokat keversz, vagy erős színeket használsz.

Neumorfizmus

A neumorfizmus („soft UI”) két árnyékot használ egy olyan elemen, amelynek a színe megegyezik a háttérével: egy sötétet jobbra és lefelé eltolva, és egy világosat balra és felfelé. A Neumorfizmus előbeállítás mindkét színt #e0e5ec-re állítja. Ne feledd, hogy ennek a stílusnak alacsony a kontrasztja, ezért az ilyen gomboknak egyértelmű fókuszállapotra és olvasható feliratra van szükségük.