DevTulz Online

CSS Box Shadow Generátor

Háttér

Mi az a CSS Box Shadow?

A CSS box-shadow tulajdonság árnyékhatásokat ad egy elem kerete köré. Az árnyékok eltolhatók, elmosódhatnak, szóródhatnak, megszínezhetők és inset-ként (belső árnyék) beállíthatók. Vesszővel elválasztott több árnyék egymásra rétegezve gazdag hatásokat hozhat létre. Ez a generátor lehetővé teszi, hogy vizuálisan hozzon létre összetett többrétegű árnyékokat, és másolja a beillesztésre kész CSS-t a vágólapra.

A Box Shadow Generátor használata

  1. Állítsa be az Offset X/Y, Blur és Spread csúszkákat az árnyék elhelyezéséhez és formázásához.

  2. Kattintson a színmintára az árnyékszín kiválasztásához, és használja az Opacity csúszkát az átlátszósághoz.

  3. Kapcsolja be az 'Inset'-et belső ragyogás vagy benyomott hatás létrehozásához.

  4. Kattintson a '+ Réteg hozzáadása' gombra több árnyék egymásra rétegezéséhez.

  5. Másolja a generált CSS-t és illessze be a stíluslapjába.

Gyakran Ismételt Kérdések

Mi a különbség a box-shadow és a drop-shadow szűrő között? A box-shadow árnyékokat ad az elem téglalap alakú szegélyek körül, és támogatja a beágyazott árnyékokat. A CSS filter: drop-shadow() az elem vizuális alakjára vonatkozik (beleértve az átlátszóságot), így nem téglalap alakú körvonalakat követhet, például átlátszó háttérrel rendelkező PNG-eket.

Hogyan hozok létre Material Design kártyamagasság-effektust? Halmozzon két box árnyékot: egy puha környezeti árnyékot (nagy elmosódás, alacsony opacitás, kis terjedés) és egy fő árnyékot (kisebb elmosódás, nagyobb opacitás, irányított eltolás). Például: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Befolyásolja a box-shadow az oldal elrendezését? Nem. A box-shadow nem befolyásolja az elem méretét vagy helyzetét a dokumentum folyamában. Az outline-tól eltérően nem foglal el elrendezési helyet és nem tolódik el más elemek.

Animálhatom a box-shadow-t? Igen. A box-shadow CSS átmenetekkel és animációkkal animálható. A teljesítmény érdekében csak szükség esetén végezzen átmenetet a box-shadow-ra — a böngészők nem tudják GPU-gyorsítani a box-shadow módosításokat olyan hatékonyan, mint a transform vagy az opacity.

Keywords: CSS box shadow generátor, box-shadow CSS, CSS árnyék eszköz, CSS drop shadow, belső árnyék, többrétegű árnyék, CSS shadow online