Vržený tieň je efekt, ktorý pri vykresľovaní na webovej stránke znižuje alebo pridáva tieň za vybraté prvky HTML. Tento efekt možno dosiahnuť pomocou „ Vrhať tieň() “ metóda ako hodnota pre CSS “ filter “ alebo pomocou “ box-shadow ' nehnuteľnosť. Využitím vlastnosti „box-shadow“ možno vizuálne vylepšenie, používateľskú skúsenosť, dôraz a zameranie pritiahnuť na konkrétny cielený prvok HTML.
Táto príručka ukazuje postup vytvárania efektu vrhnutého tieňa pomocou vlastnosti box-shadow:
-
- Vytvorte pevný vrhnutý tieň pomocou vlastnosti box-shadow
- Vytvorte rozmazaný vrhnutý tieň pomocou vlastnosti box-shadow
- Rozbaľte oblasť vrhnutých tieňov
Ako vytvoriť vrhané tiene v CSS3 pomocou vlastnosti box-shadow?
' box-shadow ” umožňuje vývojárovi vytvoriť vizuálnu hierarchiu uvedením relatívnej polohy prvkov na stránke. Pomocou neho môžu tvorcovia webových stránok vytvoriť ilúziu objektov vrhajúcich tiene na povrchy, čo dáva prvkom interaktívnejší dojem.
Syntax
Vlastnosť „box-shadow“ má syntax:
box-shadow: [ horizontálne odsadenie ] [ vertikálny posun ] [ polomer rozostrenia ] [ polomer šírenia ] [ farba ] ;
Vysvetlenie pojmov použitých vo vyššie uvedenej syntaxi:
-
- Spočiatku, „ horizontálne odsadenie ” načíta/ukladá polohu osi X a negatívne ” hodnota nastaví tieň doľava a naopak.
- ' vertikálny posun “hodnota ukladá polohu osi Y, “ pozitívne ” hodnota nastavuje tieň smerom nadol a naopak v prípade “ negatívne “hodnota.
- Ďalej, „ polomer rozostrenia ” hodnota z názvu nastavuje rozmazanosť tieňa.
- ' polomer šírenia ” hodnota určuje, o aký polomer sa má tieň rozšíriť.
- ' farba “ nastavuje farbu tieňa, môže byť v „ HSL “ alebo „ RGB “.
Teraz si prejdeme niekoľko príkladov pre lepšie pochopenie:
Príklad 1: Použitie plného vrhnutého tieňa pomocou vlastnosti box-shadow
Pre nastavenie plného vrhnutého tieňa sa ako hodnota vloží iba smer a farba tieňa. box-shadow ' nehnuteľnosť:
< štýl >.boxShadowExample {
šírka: 210px;
okraj: 2px pevný kukuričný hodváb;
výška: 210px;
farba pozadia: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
štýl >
Vo vyššie uvedenom kóde:
-
- Najprv sa vyberie prvok HTML s triedou „ boxShadowExample “. A hodnota „ 210 pixelov “ sa poskytuje „ výška “ a „ šírka vlastnosti. Využite tiež „ hranica “ a „ farba pozadia ” vlastnosti pre lepšiu vizualizáciu.
- Ďalej nastavte hodnotu „ 10px 10px lesná zelená “ na “ box-shadow ” CSS vlastnosť. ' 10 pixelov ” je horizontálny a vertikálny posun určujúci miesto, kde je potrebné použiť tieň. A „ lesná zeleň “ je farba tieňa.
Po kompilácii sa webová stránka zobrazí takto:
Výstup potvrdzuje, že tieňovanie plného typu bolo umiestnené pomocou vlastnosti box-shadow.
Príklad 2: Použitie rozmazaného vrhnutého tieňa pomocou vlastnosti box-shadow
Aby bol už aplikovaný tieň rozmazaný, vloží sa pred farbu pre „ box-shadow ' nehnuteľnosť. Navštívte nižšie aktualizovaný kód:
< štýl >.boxShadowExample {
šírka: 210px;
okraj: 2px pevný kukuričný hodváb;
výška: 210px;
farba pozadia: whitesmoke;
box-shadow: 10px 10px 15px forestgreen;
}
štýl >
Podľa vyššie uvedeného kódu je teraz tieň „ 15 pixelov “rozmazané. Po ukončení fázy kompilácie bude webová stránka vyzerať takto:
Vyššie uvedený obrázok ukazuje, že tieň je teraz rozmazaný.
Príklad 3: Rozšírenie oblasti vrhnutých tieňov
Hodnota spreadu sa poskytuje „ box-shadow vlastnosť na rozšírenie oblasti tieňa. Hodnota spreadu musí byť v číselnom formáte. Podobne ako v úryvku kódu nižšie je oblasť tieňa rozšírená na „ 20 pixelov “:
< štýl >.boxShadowExample {
šírka: 210px;
okraj: 2px pevný kukuričný hodváb;
výška: 210px;
farba pozadia: whitesmoke;
box-shadow: 10px 10px 15px 20px lesná zelená;
}
štýl >
Po vykonaní sa vrhnutý tieň zobrazí takto:
Ako môžete vidieť, oblasť tieňa sa teraz zväčšila o 20 pixelov.
Záver
' box-shadow “, majetok sa používa na vytvorenie “ Vrhať tieň ” efekt na vybrané prvky HTML. ' Vrhať tieň ” vlastnosť akceptuje päť hodnôt, “ horizontálne odsadenie “, “ vertikálny posun “, “ polomer rozostrenia “, “ polomer šírenia “ a „ farba “. Hodnoty „horizontálny posun“ a „vertikálny posun“ nastavujú rozmery tieňa, odkiaľ by mal vychádzať tieň. Hodnota „polomer rozostrenia“ spôsobí, že tieň bude rozmazaný a hodnota „polomer rozloženia“ rozširuje oblasť tieňa.