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.
A(z) CSS Box Shadow Generátor használata
Tervezd a CSS box-shadow árnyékokat vizuálisan, értékek találgatása helyett. A generátor lokálisan fut a böngésződben, és semmi nem töltődik fel.
- Állítsd be a H-Offset és V-Offset értékeket, hogy az árnyékot vízszintesen és függőlegesen mozgasd.
- Növeld a Blur értékét a lágyabb élekhez, a Spread-del pedig nagyíthatod vagy kicsinyítheted az árnyékot.
- Válassz egy Color-t, és állítsd az Opacity-t természetesebb, puhább hatásért.
- Pipáld be az Inset lehetőséget, hogy az árnyék az elem belsejében jelenjen meg, ne körülötte.
- Másold ki a kész box-shadow szabályt az előnézetből a stíluslapodba.
Kis blur és enyhén pozitív V-Offset közvetlenül az elem alatt diszkrét, élethű kontaktárnyékot ad.
Kapcsolódó eszközök
- CSS Border Radius Generátor Vizuális CSS border-radius generátor. Állítsa be minden sarkát függetlenül valós idejű előnézettel és másolja ki a CSS kódot azonnal.
- CSS Színátmenet Generátor Hozzon létre lenyűgöző CSS színátmeneteket vizuálisan. Lineáris, radiális és kúp színátmeneteket generálhat több színállomással, szögekkel és pozíciókkal. Azonnal másolhatja a gyártásra kész CSS kódot.
- CSS Grid generátor Ingyenes vizuális CSS Grid generátor élő előnézettel. Tervezzen reszponzív rácsos elrendezéseket interaktívan, és exportáljon kész CSS kódot azonnal.
- CSS Flexbox generátor Vizuális CSS Flexbox generátor élő előnézettel. Állítsa be a flex tulajdonságokat és kapjon azonnal használható CSS kódot.
- Border-radius Generátor Ingyenes kreatív border-radius generátor online. Húzza meg a 8 fogantyút vagy válasszon blob alakot, hogy organikus CSS formákat készítsen, és azonnal másolja a kódot.
- Színkonverter Ingyenes online színkonverter. Azonnal konvertálja a HEX, RGB, HSL, HSV formátumokat vizuális választóval. 100% privát, böngészőjében fut.
- CSS easing generátor Ingyenes online CSS easing generátor. Húzza a cubic-bezier kontrollpontokat az interaktív görbén, válasszon 18 előbeállítás közül, nézze meg a hurkoló labda-animációt, és azonnal másolja az időzítő függvényt.
- CSS szövegárnyék generátor Ingyenes online text-shadow generátor. Halmozz több árnyékréteget eltolással, homályosítással, színnel és átlátszatlansággal, próbáld ki a Neon, 3D, Retro előbeállításokat, és azonnal másold a CSS-t.