A CSS box-shadow tulajdonság működése
A modern webdesignban a box-shadow CSS-tulajdonság az egyik legfontosabb eszköz a vizuális hierarchia és a mélységérzet megteremtésére. Segítségével az egyébként kétdimenziós elemek kiemelkedhetnek a háttérből, vagy éppen besüllyedhetnek abba. A Box Shadow generátor felületén a csúszkák mozgatásával valós időben alakítható ki ez a hatás, miközben a háttérben azonnal létrejön a tiszta CSS-kód.
A CSS-ben az árnyékot meghatározó értékek egy pontosan definiált sorrendet követnek: a vízszintes és függőleges eltolást, az elmosás mértékét, a terjedést, végül pedig a színt és annak átlátszatlanságát. Ha belső árnyékról van szó, a deklaráció az inset kulcsszóval egészül ki. Ezen paraméterek együttes finomhangolása határozza meg, hogy a kapott árnyék egy finom, szorosan simuló kontúr vagy egy lágy, széles kiterjedésű elmosódás lesz-e.
Az eltolás, az elmosás és a terjedés szerepe
Az árnyék karakterét három alapvető méretbeli tulajdonság határozza meg, amelyek mindegyike közvetlen hatással van a látványra:
- Vízszintes eltolás: Ez a paraméter határozza meg, hogy az árnyék balra vagy jobbra mozdul el az elem mögött. Értéke -50px és 50px között állítható. A negatív értékek balra, a pozitív értékek jobbra tolják el a vetületet.
- Függőleges eltolás: Az árnyék fel- vagy lefelé történő elmozdulását szabályozza, szintén -50px és 50px közötti tartományban. A negatív érték felfelé, a pozitív érték lefelé irányítja az árnyékot.
- Elmosás: Az árnyék széleinek lágyításáért felelős. Értéke 0px-től (teljesen éles, kontúros szél) 100px-ig terjedhet. Minél nagyobb ez az érték, annál lágyabb, elmosódottabb és halványabb lesz a vetület.
- Terjedés: Ez a tulajdonság növeli vagy zsugorítja az árnyék méretét még az elmosás alkalmazása előtt. Tartománya -50px és 50px között mozog. A pozitív érték minden irányban növeli az árnyék kiterjedését, míg a negatív terjedés befelé húzza az árnyékot, ami kifejezetten hasznos a szorosan simuló, finom árnyékok kialakításakor.
Normál árnyék és belső árnyék (inset)
Alapértelmezés szerint a generált árnyék az elemen kívül jelenik meg, azt az illúziót keltve, hogy az elem lebeg a háttér felett. Ez a klasszikus elrendezés kiválóan alkalmas kártyák, menük és gombok kiemelésére.
A Belső árnyék (inset) opció bekapcsolásával az árnyék iránya megfordul, és az elem határain belülre vetül. Ez a beállítás teljesen megváltoztatja a vizuális észlelést: az elem nem kiemelkedik, hanem süllyesztettnek tűnik. Ez a hatás elengedhetetlen olyan elemek tervezésekor, mint a benyomott gombok vagy a mélyített beviteli mezők.
Mélységteremtés több árnyékréteg használatával
A valóságban a tárgyak árnyéka ritkán áll egyetlen homogén rétegből. A természetes fény lágy, többlépcsős átmeneteket hoz létre. A webdesignban a leginkább valósághű hatást úgy érhetjük el, ha több árnyékréteget halmozunk egymásra.
A generátor lehetővé teszi több réteg kezelését a Réteg hozzáadása és a Réteg eltávolítása gombok segítségével. Új réteg hozzáadásakor a rendszer egy alapértelmezett értékekkel rendelkező réteget hoz létre. A felületen előre renderelve öt réteg található, amelyek közül az első alapértelmezett értékei 0 8 24 -4 (vízszintes eltolás, függőleges eltolás, elmosás, terjedés) 18%-os átlátszatlanságú fekete színnel, míg a többi réteg kezdetben rejtve van.
Amikor több réteget használunk, a CSS-kód az egyes rétegek értékeit vesszővel elválasztott listaként adja meg a box-shadow tulajdonságon belül. A rétegek egymásra épülésével létrehozható például egy élesebb, sötétebb belső mag, és egy sokkal lágyabb, szélesebb külső elmosódás, ami professzionális mélységérzetet kölcsönöz a kártyáknak.
A generátor kezelőfelülete és beállításai
A Box Shadow generátor felületén az alábbi bemeneti és kimeneti mezők segítségével szabható testre az árnyék:
| Funkció / Mező | Típus / Tartomány | Leírás |
|---|---|---|
| Vízszintes eltolás | Csúszka (-50px és 50px között) | Az árnyék horizontális pozicionálása. |
| Függőleges eltolás | Csúszka (-50px és 50px között) | Az árnyék vertikális pozicionálása. |
| Elmosás | Csúszka (0px és 100px között) | Az árnyék széleinek lágyítása. |
| Terjedés | Csúszka (-50px és 50px között) | Az árnyék méretének növelése vagy csökkentése. |
| Árnyék színe | Színválasztó | Az árnyék bázisszínének meghatározása. |
| Átlátszatlanság | Csúszka | Az árnyék transzparenciájának finomhangolása. |
| Belső árnyék (inset) | Kapcsoló | Az árnyék befelé fordítása a süllyesztett hatásért. |
A beállítások módosítása után a generált kód a CSS feliratú mezőben jelenik meg, ahonnan a CSS másolása gombbal azonnal vágólapra helyezhető.
Adatkezelés és biztonság
A Box Shadow generátor használata során a megadott paraméterek és színbeállítások feldolgozása teljes egészében a felhasználó eszközén történik. Minden árnyék renderelése a böngészőjében történik. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire, így a tervezési folyamat teljesen privát marad.
Gyakran Ismételt Kérdések
Mit szabályoz pontosan az eltolás, az elmosás és a terjedés?
Az eltolás (offset) balra/jobbra és fel/le mozgatja az árnyékot, az elmosás (blur) lágyítja a széleit, a terjedés (spread) pedig növeli vagy zsugorítja azt az elmosás előtt. A negatív terjedés befelé húzza az árnyékot, ami szorosan simuló árnyékoknál hasznos.
Mire szolgál az inset opció?
A normál árnyék az elemen kívülre esik, mint a fény egy kiemelkedő kártya mögött. Az Inset (belső árnyék) ezzel szemben befelé fordítja azt, így az elem süllyesztettnek tűnik – ez rendkívül hasznos mélyített beviteli mezőkhöz vagy benyomott gombokhoz.
Miért érdemes egynél több árnyékréteget használni?
Egyetlen árnyék egy bizonyos méret felett laposnak hat. A valósághű mélységérzet általában egy élesebb, sötétebb árnyék és egy lágyabb, szélesebb árnyék kombinációjából adódik – adjon hozzá egy második réteget, és finomítsa őket külön-külön a tökéletes hatás érdekében.