A vetett árnyék egy olyan effektus, amely a weboldalon megjelenített kiválasztott HTML-elemek mögé ejti vagy árnyékot ad. Ezt a hatást a „ árnyék() ' metódus a CSS értékeként' szűrő ” tulajdonság vagy a „ doboz-árnyék ' ingatlan. A „box-shadow” tulajdonság felhasználásával a vizuális fejlesztés, a felhasználói élmény, a hangsúly és a fókusz egy adott célzott HTML-elemre irányítható.
Ez az útmutató bemutatja a vetett árnyék hatás létrehozásának folyamatát a box-shadow tulajdonság használatával:
-
- Hozzon létre egy tömör vetett árnyékot a doboz-árnyék tulajdonság használatával
- Hozzon létre egy elmosódott vetett árnyékot a doboz-árnyék tulajdonság használatával
- Bontsa ki az árnyékoló területet
Hogyan készítsünk vetett árnyékokat a CSS3-ban a box-shadow tulajdonság használatával?
A ' doboz-árnyék ” tulajdonság lehetővé teszi a fejlesztő számára, hogy vizuális hierarchiát hozzon létre az elemek relatív pozíciójának jelzésével az oldalon. Használatával a weboldal készítői azt az illúziót kelthetik, hogy a tárgyak árnyékot vetnek a felületekre, interaktívabb érzetet adva az elemeknek.
Szintaxis
A „box-shadow” tulajdonság szintaxisa a következő:
box-shadow: [ vízszintes eltolás ] [ függőleges eltolás ] [ elmosódási sugár ] [ terjedési sugár ] [ szín ] ;
A fenti szintaxisban használt kifejezések magyarázata:
-
- Kezdetben a „ vízszintes eltolás ” lekéri/tárolja az X-tengely pozícióját, és a „ negatív ” érték balra állítja az árnyékot és fordítva.
- A ' függőleges eltolás ' érték tárolja az Y tengely pozícióját, a ' pozitív ” érték lefelé állítja az árnyékot, és fordítva a „ negatív ” értékét.
- Ezután a „ elmosódási sugár ” érték a névből adódóan az árnyék homályosságát állítja be.
- A ' terjedési sugár ” érték adja meg, hogy az árnyék mekkora sugarú táguljon.
- A ' szín ” beállítja az árnyék színét, ez lehet a „ HSL ” vagy „ RGB ” formátumban is.
Most nézzünk meg néhány példát a jobb megértés érdekében:
1. példa: Solid Drop Shadow alkalmazása a box-shadow Property segítségével
A szilárd vetett árnyék beállításához csak az irányok és az árnyék színe kerül beillesztésre értékként a „ doboz-árnyék ' ingatlan:
< stílus >.boxShadowExample {
szélesség: 210 képpont;
szegély: 2px tömör kukoricaselyem;
magasság: 210 képpont;
háttérszín: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
stílus >
A fenti kódban:
-
- Először a HTML elemet kell kiválasztani, amelynek osztálya ' boxShadowExample ”. És az értéke ' 210 képpont ' a ' magasság ” és „ szélesség ” tulajdonságait. Ezenkívül használja a „ határ ” és „ háttérszín ” tulajdonságait a jobb megjelenítés érdekében.
- Ezután állítsa be a ' 10px 10px erdőzöld ' hoz ' doboz-árnyék ” CSS tulajdonság. A ' 10 képpont ” a vízszintes és függőleges eltolás, amely meghatározza azt a helyet, ahol az árnyékot alkalmazni kell. És a ' erdő zöld ” az árnyék színe.
Az összeállítás után a weboldal így néz ki:
A kimenet megerősíti, hogy szilárd típusú vetett árnyék került elhelyezésre a box-shadow tulajdonság használatával.
2. példa: Homályos vetett árnyék alkalmazása a doboz-árnyék tulajdonság használatával
A már alkalmazott árnyék homályossá tételéhez a program egy további számértéket szúr be a „ doboz-árnyék ' ingatlan. Látogassa meg az alábbi frissített kódot:
< stílus >.boxShadowExample {
szélesség: 210 képpont;
szegély: 2px tömör kukoricaselyem;
magasság: 210 képpont;
háttérszín: fehér füst;
box-shadow: 10px 10px 15px forestgreen;
}
stílus >
A fenti kód szerint az árnyék most „ 15 képpont ” elmosódott. Az összeállítási fázis befejezése után a weboldal így néz ki:
A fenti ábra azt mutatja, hogy az árnyék most elmosódott.
3. példa: A vetett árnyék terület kiterjesztése
A spread értéke a „ doboz-árnyék ” ingatlan az árnyék régiójának bővítésére. A spread értékének numerikus formátumban kell lennie. Az alábbi kódrészlethez hasonlóan az árnyékrégió a következőre bővül: 20 képpont ”:
< stílus >.boxShadowExample {
szélesség: 210 képpont;
szegély: 2px tömör kukoricaselyem;
magasság: 210 képpont;
háttérszín: fehér füst;
box-shadow: 10px 10px 15px 20px forestgreen;
}
stílus >
A végrehajtás után a vetett árnyék így jelenik meg:
Amint láthatja, az árnyék területe most 20 képponttal nőtt.
Következtetés
A ' doboz-árnyék ' ingatlant egy ' árnyék ” hatása a kiválasztott HTML-elemekre. A ' árnyék ' tulajdonság öt értéket fogad el, ' vízszintes eltolás ”, „ függőleges eltolás ”, „ elmosódási sugár ”, „ terjedési sugár ” és „ szín ”. A „vízszintes eltolás” és a „függőleges eltolás” értékek határozzák meg az árnyék méreteit, ahonnan a vetett árnyéknak elő kell jönnie. Az „elmosódási sugár” érték elmosódottá teszi az árnyékot, a „terjedési sugár” érték pedig kiterjeszti az árnyék területét.