CSS Box Shadow Generátor

Mi a CSS box-shadow?

A CSS box-shadow tulajdonság árnyékhatásokat ad egy elem kerete köré. Az árnyékok alapvető eszközei a mélység, az emelkedés és a vizuális hierarchia megteremtésének a webdesignban. Egy jól megalkotott árnyék hatására egy kártya úgy tűnhet, mintha az oldal fölött lebeg, vagy megnyomott megjelenést kölcsönözhet egy gombnak.

A box-shadow több paramétert fogad el: vízszintes eltolás, függőleges eltolás, elmosódási sugár, kiterjedési sugár és szín. Az inset kulcsszóval belső árnyékokat is létrehozhat. Egy elemre vesszőkkel elválasztva több árnyékot is rétegezhet – ezek hátsótól-előlsőig sorrendben renderelődnek.

A box-shadow szintaxisának részletezése

A teljes szintaxis: box-shadow: [inset] eltolás-x eltolás-y [elmosódási-sugár] [kiterjedési-sugár] szín. Az eltolás-x és az eltolás-y kötelező értékek, amelyek az árnyék pozícióját határozzák meg az elemhez képest. A pozitív értékek az árnyékot jobbra és lefelé tolják. Az elmosódási sugár lágyítja az éleket – a 0 értékkel éles árnyékot kapunk. A kiterjedési sugár növeli vagy csökkenti az árnyékot – negatív értékek szorosabb árnyékot hoznak létre.

Az eszköz használata

Állítsa be a vízszintes eltolás, a függőleges eltolás, az elmosódás, a kiterjedés és a szín csúszkáit. Az előnézet valós időben frissül, így pontosan láthatja, hogyan fog kinézni az árnyék. Kapcsolja be az inset opciót belső árnyékokhoz. Több árnyékréteget is hozzáadhat a valósághűbb mélységhatás érdekében. Ha elégedett az eredménnyel, másolja a generált CSS-kódot.

Tippek hatásos árnyékokhoz

• Alacsony átlátszatlanságú, finom árnyékokat használjon letisztult, modern, emelkedett megjelenéshez.
• Valósabb mélységhatáshoz rétegezzen több árnyékot – egy éles, közeli árnyék egy lágy, diffúz árnyékkal együtt a valós megvilágítást utánozza.
• A nagy elmosódás és enyhe eltolás kombinációja lágy lebegési hatást ad, amely ideális kártyákhoz és modálisokhoz.
• A negatív kiterjedés szűkebb, fókuszáltabb árnyékot hoz létre, amely finom szegélyként is alkalmazható.
• Az árnyékok irányát következetesen tartsa az egész oldalon – az ellentmondó fényforrások természetellenesen hatnak.

A Material Design emelkedési rendszere

A Google Material Design 0dp-től 24dp-ig terjedő emelkedési szinteket definiál, mindegyikhez specifikus árnyékértékekkel. Nagyobb emelkedés nagyobb elmosódást és eltolást jelent. Ez a rendszer következetes vizuális hierarchiát biztosít egy alkalmazáson belül. Még ha nem is követi a Material Designt, a következetes emelkedési szintek elve bármely design-rendszer esetén értékes.

Teljesítményre gyakorolt hatás

A box-árnyékok GPU-gyorsítottak a modern böngészőkben, és tipikus használat esetén minimális a teljesítményigényük. A nagyon nagy elmosódási sugár (50px+) egyszerre sok elemre alkalmazva azonban képkocka-kiesést okozhat animációk során. Ha árnyékokat kell animálnia, fontolja meg a transform: scale() alkalmazását egy statikus árnyékkal rendelkező pseudo-elemen az árnyékértékek közvetlen animálása helyett.

Gyakran ismételt kérdések

Mi a különbség a box-shadow és a drop-shadow között?

A box-shadow az elem négyszögletes keretére vonatkozik, beleértve a margókat és a szegélyt. A filter: drop-shadow() függvény az elem tényleges alakját követi, beleértve a képek átlátszó régióit is. Használja a drop-shadow-t nem négyszögletes elemekhez, például ikonokhoz vagy átlátszóságot tartalmazó PNG-képekhez.

Használhatom-e a box-shadow-t szegélyként?

Igen. Egy nulla elmosódású, pozitív kiterjedésű box-shadow úgy viselkedik, mint egy szegély, amely nem befolyásolja az elrendezést. Ez a technika akkor hasznos, ha vizuális szegélyre van szükség anélkül, hogy megváltoztatná az elem méreteit – például hover-állapotokban.