CSS Box Shadow Generátor
Ingyenes online CSS box-shadow generátor. Vizuálisan hozzon létre gyönyörű árnyékokat állítható eltolással, elhomályosítással, kiterjedéssel, színnel és betéttel. Élő előnézet és azonnali kód másolás.
Mi a CSS box-shadow?
A CSS box-shadow egy CSS tulajdonság, amely árnyékeffektusokat ad egy elem kerete köré. Lehetővé teszi eső árnyékok, belső árnyékok és több árnyékréteg létrehozását az eltolás, elhomályosítási sugár, kiterjedési sugár és színértékek megadásával.
Mik a box-shadow paraméterei?
A box-shadow tulajdonság több értéket fogad el: vízszintes eltolás (X), függőleges eltolás (Y), elhomályosítási sugár, kiterjedési sugár, szín és az opcionális inset kulcsszó. Több árnyékot is megadhat vesszővel elválasztva.
Mi az inset kulcsszó?
Az inset kulcsszó megváltoztatja az árnyékot külső árnyékból (eső árnyék) belső árnyékká. Amikor az inset meg van adva, az árnyék az elem szegélyén belül jelenik meg, nem kívül, betét hatást létrehozva.
Mi az elhomályosítási sugár?
Az elhomályosítási sugár határozza meg, hogy az árnyék széle mennyire elmosódott. A 0 érték éles, szilárd szélt hoz létre. Nagyobb értékek szélesebb, puhább árnyékot hoznak létre, amely távolabb nyúlik az elemtől.
Mi a kiterjedési sugár?
A kiterjedési sugár növeli vagy csökkenti az árnyék méretét. A pozitív értékek az árnyékot az elemnél nagyobbra, a negatív értékek kisebbre teszik. Ez az árnyékot befolyásolja az elhomályosítás alkalmazása előtt.
Hogyan hozhatok létre több árnyékot?
Több árnyékot hozhat létre, ha minden árnyékdefiníciót vesszővel elválaszt. Minden árnyéknak különböző eltolási, elhomályosítási, kiterjedési és színértékei lehetnek. Az árnyékok a deklarálás sorrendjében alkalmazódnak, az első árnyék van felül.
Használhatok RGBA színeket az árnyékokhoz?
Igen, bármilyen CSS színformátumot használhat, beleértve az RGBA, HSLA, HEX vagy megnevezett színeket. Az RGBA és HSLA különösen hasznosak félátlátszó árnyékok létrehozásához, amelyek természetesen keverednek a háttérrel.
Hogyan másolom a generált CSS kódot?
Egyszerűen kattintson a "Kód másolása" gombra a generátor felületén. A CSS kód a vágólapra másolódik, és közvetlenül beilleszthető a stíluslapba vagy HTML fájlba.
A box-shadow minden böngészőben támogatott?
Igen, a box-shadow minden modern böngészőben támogatott, beleértve a Chrome, Firefox, Safari, Edge és Opera böngészőket. 2011 óta a CSS3 része, és kiváló böngésző-kompatibilitással rendelkezik.
A box-shadow befolyásolja a teljesítményt?
A box-shadow minimálisan befolyásolja a modern böngészők teljesítményét. Azonban több összetett árnyék használata nagy elhomályosítási sugárral sok elemen befolyásolhatja a renderelési teljesítményt, különösen mobileszközökön.
Mik a box-shadow gyakori használati esetei?
A gyakori használatok közé tartozik a kártya-emelési hatások létrehozása, a gombok mélységének hozzáadása, betét űrlapmezők létrehozása, material design árnyékok megvalósítása és az átfedő elemek vizuális elválasztása.
Animálhatom a box-shadow-t?
Igen, a box-shadow animálható CSS átmenetekkel vagy animációkkal. Azonban a box-shadow animálása teljesítményigényes lehet. Jobb teljesítmény érdekében fontolja meg a pszeudo-elemek használatát átlátszósági átmenetekkel.