Hogyan használd?
- Válassz egy mintát (lágy, rétegzett, lebegő kártya, retró, belső, neumorf, fénylő), vagy kezdd az alapbeállítással.
- Állítsd a vízszintes és függőleges eltolást, az elmosást, a terjedést, a színt és a fedést.
- Adj hozzá rétegeket; mindegyik külön szerkeszthető.
- Másold ki a CSS-t vagy a Tailwind-osztályt.
A box-shadow négy száma
box-shadow: 0 10px 30px -8px rgb(15 23 42 / 0.35);
| Érték | Mit csinál |
|---|---|
| 0 | vízszintes eltolás (jobbra pozitív) |
| 10px | függőleges eltolás (lefelé pozitív) |
| 30px | elmosás: minél nagyobb, annál puhább |
| -8px | terjedés: negatívval kisebb, „lebegőbb” az árnyék |
Az inset kulcsszó belső árnyékot csinál: a doboz mintha be lenne nyomva.
Miért több réteg?
A valódi tárgyak árnyéka a tárgy közelében sötét és éles, távolabb világos és elmosódott. Egyetlen rétegből ezt nem lehet kihozni. A rétegzett, sima minta öt, egyre nagyobb és halványabb árnyékot tesz egymásra, ettől lesz a kártya árnyéka természetes.
A rétegeket vesszővel választjuk el, az első kerül legfelülre. Teljesítményben ez nem gond: a modern böngészők a box-shadow-t a grafikus kártyán rajzolják.
Tailwind és megosztás
A Tailwind beépített árnyékai (shadow-md, shadow-xl) helyett itt pontos, tetszőleges értékes osztályt kapsz: shadow-[0_10px_30px_-8px_rgb(15_23_42_/_0.35)]. A lekerekítést is hozzáírjuk.
A beállítások egy linkkel megoszthatók; a # utáni rész nem jut el a szerverünkre.
Gyakori kérdések
Hogyan adok árnyékot egy divnek CSS-ben?
A box-shadow tulajdonsággal: eltolás, elmosás, terjedés és szín. A generátor megírja a kódot.
Mi a különbség a box-shadow és a drop-shadow között?
A box-shadow a doboz téglalapjához igazodik, a filter: drop-shadow() a tényleges alakhoz (például egy átlátszó PNG-hez).
Hogyan lesz belső árnyék?
Kapcsold be az inset jelölőt az adott rétegnél.
Hány réteget tehetek egymásra?
A generátorban legfeljebb nyolcat; a CSS nem korlátozza, de ennyi bőven elég.