A CSS tulajdonság használatával bármelyik HTML elemhez hozzáadhatunk egy árnyékot box-shadow. Itt van, hogyan.
Alapvető árnyék hozzáadása
Először állítsunk be néhány alapvető HTML elemet, hogy hozzáadjuk az árnyékokat:
Box1 Box2 Box3 Ezután adjon hozzá néhány alapvető CSS-t:
p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }Az eredmény csak három fekete doboz, amelyekhez könnyedén hozzáadhatunk árnyékokat egyedi azonosítójuk meghívásával:
Alapvető árnyék hozzáadásához használjuk az box-shadow1. doboz tulajdonságát:
/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Itt 3 paraméterünk van. Az első 2 az x-eltolás és az y-eltolás. Megállapítják az árnyék helyét.
Az eltolás az eredethez képest, amely HTML-ben mindig egy elem bal felső sarka. A pozitív x-eltolás az árnyékot jobbra, a pozitív y-eltolás pedig az árnyékot lefelé mozgatja.
A harmadik paraméter az árnyék színe.
Ne feledje, hogy bár itt elemeket használtunk , a box-shadowtulajdonság bármely más HTML elemre is alkalmazható.
Elmosási sugár hozzáadása
Ha azt akarjuk, hogy az árnyék egy kicsit reálisabbnak tűnjön, akkor kísérletezni akarunk a blur-radiusparaméterrel.
Ez a paraméter szabályozza, hogy mennyire kell elhomályosítani az árnyékot, hogy nagyobb és világosabb legyen. Alkalmazzuk a 2. háttérmagyarázatra:
/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
A 4px értéke úgy állítja be az elmosódás sugarát, hogy alkalmazza az árnyékunkat.
Spread Radius hozzáadása
Ha szabályozni akarjuk az árnyék méretét, használhatjuk azt a spread-radiusparamétert, amely szabályozza, hogy egy árnyék mennyit nő vagy csökken.
Adjunk hozzá egy 8 képpontos terjedési sugarat a 2. mezőbe:
/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Ne feledje ezeknek a paramétereknek a sorrendjét!
Több árnyék kombinálása egyetlen tulajdonságban
Ha szeretnénk fantáziát szerezni, több elemet is hozzáadhatunk egy elemhez egyetlen box-shadowtulajdonság segítségével.
Tegyük ezt a 3. rovattal egy kék és zöld árnyék egyidejű hozzáadásával:
/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
Bónusz: Hozzon létre egy árnyékot
Bár nem hoz létre árnyékot, a insetparaméter a box-shadowtulajdonsággal együtt is használható .
Ahogy a neve is sugallja, ez a paraméter egy beágyazott árnyékot hoz létre (azaz árnyékot egy doboz belsejében).
A insetparaméter elhelyezhető a paraméter elején vagy végén
box-shadowingatlan. Itt bemutatjuk annak használatát egy blockquoteelemmel.
HTML:
The key to success is to start before you're ready. — Marie Forleo
CSS:
blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Természetesen hozzáadhat némi elmosódást és terjedést az árnyék fokozásához, vagy akár több árnyékot is:
box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Az box-shadowingatlan segítségével könnyedén kiemelhetjük a weboldal elemeit, hogy szép 3D-s fényhatást hozzunk létre.
Ha saját maga szeretne kísérletezni, íme egy kódtoll, amelyet az oktatóanyagban használt példákkal hoztam létre.
Játsszon körül, és nézze meg, mit találhat ki!
További webfejlesztési tippeket és ismereteket szeretne látni?
- Iratkozzon fel a heti hírlevelemre
- Látogassa meg a blogomat az 1000 Mile World címen
- Kövess a Twitteren