Poradie nahrávania je zásadne dôležité. Prvá hodnota je vždy posun pozdĺž osi X, druhá - pozdĺž osi Y.
Ak nie je potrebný posun pozdĺž jednej z osí, nastavte ho na nulu:
Class(box-shadow: 0 8px;) – posun tieňa iba pozdĺž osi Y
Výsledok
Class(box-shadow: 8px 8px;) – posun pozdĺž oboch osí
Výsledok
Záporná hodnota pre osi box-shadow
Tieň sa bude pohybovať opačným smerom:
Class(box-shadow: -8px 8px;) – posun tieňa so zápornou hodnotou pozdĺž osi X
Výsledok
Polomer rozostrenia tieňov
Tretí parameter vlastnosti box-shadow. Ak nie je zadaný, hodnota je 0 a veľkosť tieňa sa rovná veľkosti prvku, na ktorý sa aplikuje.
Class(box-shadow: 0 48px 0;) – tieň duplikuje rozmery prvku, na ktorý sa aplikuje
Výsledok
Keď je hodnota väčšia ako nula, okraje stratia jasnosť, tieň sa zväčší a opticky zosvetlí. Blur sa aplikuje zo všetkých strán:
Class(box-shadow: 0 0 8px;) – žiadny posun, iba rozmazanie
Výsledok
Class(box-shadow: 0 8px 8px;) – odsadenie a rozmazanie osi Y
Výsledok
Záporná hodnota sa považuje za chybu a tieň sa vôbec nezobrazí.
Polomer roztiahnutia tieňa
Štvrtý parameter vlastnosti box-shadow. Zmení veľkosť tieňa vzhľadom na prvok. Rozťahuje sa vo všetkých smeroch:
Class(box-shadow: 0 0 0 8px;) – žiadne posunutie alebo rozmazanie, iba roztiahnutie
Výsledok
IN v tomto prípade tieň je na šírku a výšku o 16 pixelov väčší ako prvok: 8 pixelov vľavo + 8 pixelov vpravo a 8 pixelov hore + 8 pixelov dole.
Záporná hodnota roztiahnutia tieňa v CSS
Tieň sa neroztiahne, ale zo všetkých strán sa zúži o zadanú hodnotu:
Class(box-shadow: 0 16px 0 -8px;) – zníženie tieňa so zápornou hodnotou
Výsledok
Farba tieňa
V predvolenom nastavení farba tieňa duplikuje farbu písma: ako v príkladoch vyššie.
Farba tieňa je určená v akomkoľvek dostupnom formáte CSS:
- #ff0009
- rgb(255; 0; 9)
- hsl(358, 100 %, 50 %);
Dajte prvku modrý tieň:
Trieda(box-shadow: 0 8px #3a8fe7;)
Výsledok
Vnútorný tieň
Parameter vložka zobrazí tieň vo vnútri bloku.
Na rozdiel od vyššie uvedených možností neexistuje prísne poradie písania. Obe možnosti poskytnú rovnaký výsledok:
Box-shadow: 0 8px #3a8fe7 vložka; box-shadow: inset 0 8px #3a8fe7;
Výsledok
Druhá možnosť je ľahšie pochopiteľná pri čítaní kódu.
Niekoľko tieňov
Viaceré tiene sú oddelené čiarkami. Zobraziť poradie zhora nadol:
Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )
Výsledok
Ak vymeníte miesta, modrý tieň nebude viditeľný:
Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )
Výsledok
Vnútorný a vonkajší tieň sú nastavené súčasne:
Trieda (box-shadow: 0 16px #3ae7af, vložka 0 8px #3a8fe7; )
Výsledok
Zaoblený tieň
Ak je prvku daná vlastnosť hraničný polomer, tieň bude mať zaoblené rohy.
Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )
Výsledok
Nastavením roztiahnutia tieňa zväčšíme jeho zaoblenie. Napríklad polomer okraja je 8 pixelov a roztiahnutie tieňa je 4.
8+4=12px je polomer zaoblenia tieňa.
Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )
Výsledok
Rovnaký princíp platí pre zmenšovanie tieňa, keď je hodnota záporná.
8+(-4)=4px – získame zaoblenie tieňa, ktoré je dvakrát menšie.
Ak je kompresia tieňa väčšia ako border-radius, dostaneme tieň s pravými uhlami. Napríklad kompresia je 16px.
8+(-16)=(-8), ale zaoblenie nemôže mať zápornú hodnotu a použije sa nula.
Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )
Výsledok
Vlastnosť CSS box-shadow Podporované všetkými populárnymi prehliadačmi okrem Opery Mini.
Dnes sa naučíme, ako vytvoriť tiene CSS bez obrázkov. Po dokončení tohto návodu už nebudete potrebovať generátor tieňov CSS.
Čo je hlavnou výhodou tieňov vytvorených pomocou Pomocník CSS 3, ide o jednoduchosť implementácie a zníženie počtu požiadaviek na server (keďže už nepoužívame obrázky). Na vytvorenie tieňa CSS potrebujeme značku div a vlastnosť box-shadow CSS. Nebudete potrebovať žiadne ďalšie označenie, pretože vytvoríme pseudo prvky :after a :before, ktoré umiestnime za hlavný objekt (div s triedou blokovať).
Pozrite sa na HTML kód, pre ktorý vytvoríme tieň CSS3:
Obsah
Ďalej si môžete pozrieť hotové príklady a kód potrebný na ich implementáciu. Aby sme minimalizovali text na stránke, vynecháme CSS vlastnosti s predponami prehliadača. Úplný kód Môžete si ho pozrieť kliknutím na odkaz „Príklad“ zodpovedajúci príkladu.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3) , 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px ; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after ( right :10px; left:auto; transform:rotate(3deg); )
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; spodok:12px; vľavo:10px; šírka:50%; výška:55%; max-width:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0,5); transform:skew(-8deg) rotation(-3deg); ) .block:after ( right:10px; left:auto; transform:skew(8deg) rotation(3deg); )
Pomocou tieňa môžete poskytnúť blokovú perspektívu. Pozri príklad.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; ) .block:before (vľavo:80px; dole:5px ; šírka: 50 %; výška: 35 %; maximálna šírka: 200 pixelov; tieňový rámček: -80 pixelov 0 8 pixelov rgba (0, 0, 0, 0,4); transform: zošikmenie (50 stupňov); transform-origin: 0 100 % ; ) .block:after ( display:none; )
CSS tieň pre zvýšený blok. Pozri príklad.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0,5), 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0 , 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; )
Príklad tieňa CSS3 pre vertikálne zložený blok. Pozri príklad.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; ) .block:before (horné:10px; spodné:10px ; left:0; right:50%; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:10px / 100px; )
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; ) .block:before (horné:10px; spodné:10px ; left:0; right:0; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:10px / 100px; )
Príklad tieňa CSS3 pre horizontálne zložený blok. Pozri príklad.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; ) .block:before (horná:50%; spodná: 0px; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:100px / 10px; )
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolútna; z-index:-2; ) .block:before (top:0px; bottom:0px ; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0,6); border-radius:100px / 10px; )
CSS3 tieň pre otočený blok. Pozri príklad.
.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3) , 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-index:-1; top:0px; bottom:0; left:0; right:0px; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba (0, 0, 0, 0,1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50% ; výška: 20 %; max-width: 300 pixelov; box-shadow: 0 15 pixelov 10 pixelov rgba(0, 0, 0, 0,7); transform:rotate(-3deg); ) .block:after ( right:10px; left: auto; transform:rotate(3deg); ) Dobrý deň, milí čitatelia. Dnes budeme robiť s vami krásny tieň pre bloky pomocou CSS. Myslím, že to bude pre vás veľmi užitočné, najmä ak robíte šablóny. A bloky s tieňmi vyzerajú veľmi atraktívne a moderne.
Podpora prehliadača
V podstate všetky moderné prehliadače podporujú efekty tieňov:
- Internet Explorer 9.0 a vyšší;
- Firefox 3.5 a vyšší;
- Chrome 1 a vyššie;
- Safari 3 a vyššie;
- Opera 10.5 a vyššia.
Chcel by som tiež spomenúť jeden dôležitý bod: pre niektoré prehliadače budeme používať určité predpony. Používa sa pre Firefox -moz-, pre Chrome a Safari musíte použiť predponu - webkit.
No a teraz prejdime k najzaujímavejšej časti. Pozrime sa na všetky tiene samostatne, bude ich 8 efektov.
Efekt tieňa 1
V tomto príklade je tieň bloku v spodnej časti.
HTML
Účinok 1
CSS
text-align:center; poloha:relatívna; top:80px; ) .box (šírka:70%; výška:200px; pozadie:#FFF; okraj:40px automaticky; ) /*========================= ========== * Účinok 1 * ====================================== ===========*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )Efekt tieňa 2
V tomto príklade ide tieň z bloku doľava a doprava, ale v strede nie je žiadny. Ukazuje sa to ako veľmi zaujímavý efekt.
HTML
Účinok 2
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 2 * == ==================================== =========================*/ .efekt2 ( pozícia: relatívna; ) .efekt2:predtým, .efekt2:po (index z: - 1; pozícia: absolútna; obsah: ""; dole: 15 pixelov; vľavo: 10 pixelov; šírka: 50 %; hore: 80 %; max -width: 300 pixelov; pozadie: #777; -webkit-box-shadow: 0 15 pixelov 10 pixelov #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform : rotation(-3deg); -moz-transform: rotation(-3deg); -o -transformácia: rotácia (-3°); -ms-transform: rotácia (-3°); transformácia: rotácia (-3°); . effect2:after ( -webkit-transform: rotácia(3°); -moz-transform: rotácia (3 stupne); -o-transform: otočiť (3 stupne); -ms-transform: otočiť (3 stupne); transformovať: otočiť (3 stupne) ; vpravo: 10px; vľavo: auto; )Efekt tieňa 3
Tu je tieň z bloku iba naľavo.
HTML
Účinok 3
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 3 * == ==================================== =========================*/ .effect3 ( pozícia: relatívna; ) .effect3:before ( z-index: -1; pozícia: absolútna ; content: ""; dole: 15px; vľavo: 10px; šírka: 50%; hore: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz -box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotation(-3deg ); -moz-transform: rotation(-3deg); -o-transform: rotation( -3deg); -ms-transform: otočiť(-3deg); transformovať: otočiť (-3deg); )Efekt tieňa 4
Tieň na pravej strane.
HTML
Účinok 4
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 4 * == ==================================== ==========================*/ .effect4 ( pozícia: relatívna; ) .effect4:after ( z-index: -1; pozícia: absolútny; obsah: ""; spodok: 15px; pravý: 10px; ľavý: automaticky; šírka: 50%; hore: 80%; max- šírka:300px; pozadie: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotation(3deg); -moz-transform: rotation(3deg); -o-transform : otočiť (3 stupne); -ms-transform: otočiť (3 stupne); transformovať: otočiť (3 stupne); )Efekt tieňa 5
V tomto prípade sa tieň na oboch stranách posunul smerom nadol výraznejšie.
HTML
Účinok 5
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinok 5 * == ==================================== =========================*/ .efekt5 (pozícia: relatívna; ) .efekt5:predtým, .efekt5:po (index z: - 1; pozícia: absolútna; obsah: ""; dole: 25px; vľavo: 10px; šírka: 50%; hore: 80%; max -width:300px; pozadie: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform : rotation(-8deg); -moz-transform: rotation(-8deg); -o -transformácia: rotácia (-8°); -ms-transform: rotácia (-8°); transformácia: rotácia (-8°); ) . effect5:after ( -webkit-transform: rotácia(8°); -moz-transform: rotácia (8 stupňov); -o-transform: otočiť (8 stupňov); -ms-transform: otočiť (8 stupňov); transformovať: otočiť (8 stupňov) ; vpravo: 10px; vľavo: auto; )Efekt tieňa 6
Tu je efekt zakrivených tieňov v spodnej časti bloku.
HTML
Účinok 6
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 6 * == ==================================== =========================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius: 100px / 10px; border-radius:100px / 10px; ) .effect6:after ( right:10px; left:auto; -webkit-transform :skew(8deg) rotation(3deg); -moz-transform:skew(8deg) rotation (3deg); -ms-transform:skew(8deg)otočiť(3deg); -o-transformácia: skosenie (8 stupňov) otočenie (3 stupňov); transform:skew(8deg) rotation(3deg); )Efekt tieňa 7
Rovnaký efekt je len tieň pod a nad blokom.
HTML
Účinok 7
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 7 * == ==================================== =========================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inset; ) .effect7:before, .effect7:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotation(3deg); -moz-transform:skew(8deg) rotation( 3deg); -ms-transform:skew(8deg)otočiť(3deg); -o-transformácia: skosenie (8 stupňov) otočenie (3 stupňov); transform:skew(8deg) rotation(3deg); )Efekt tieňa 8
Efekt zakrivených tieňov po stranách bloku.
HTML
Účinok 8
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 8 * == ==================================== =========================*/ .effect8 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after ( right:10px; left:auto; -webkit-transform: skew(8deg) rotation(3deg); -moz-transform:skew(8deg) rotation( 3deg); -ms-transform:skew(8deg)otočiť(3deg); -o-transformácia: skosenie (8 stupňov) otočenie (3 stupňov); transform:skew(8deg) rotation(3deg); )To je všetko, milí priatelia. Ak niečomu nerozumiete, určite sa opýtajte v komentároch. Do skorého videnia.
S príchodom štandardu CSS 3 predstavil vlastnosť box-shadow, ktorá sa medzi webovými vývojármi stala široko používanou, pretože uľahčuje pridanie jedného alebo viacerých tieňov do rámčeka prvku, aby sa dosiahol požadovaný vizuálny efekt.
V predchádzajúcom článku sme sa pozreli na vlastnosť border-radius, pomocou ktorej môžete získať tieň so zaoblenými rohmi. Analogicky s tieňom textu (text-shadow) môžete vytvoriť viacero tieňov, podľa ktorých sa aplikujú os z spredu dozadu (s prvým daným tieňom navrchu).
Pozrime sa bližšie na syntax tejto modernej vlastnosti:
Uvažujme v poradí možné hodnoty tejto vlastnosti:
| Význam | Popis |
|---|---|
| žiadny | Tieň sa nezobrazuje. Toto je predvolená hodnota. |
| vložka | Voliteľná hodnota. Ak táto hodnota nie je zadaná (predvolená hodnota), tieň bude na vonkajšej strane prvku a vytvorí efekt vydutia prvku. Ak je prítomné kľúčové slovo (hodnota), tieň spadne do prvku a vytvorí preliačený efekt. Inými slovami, ide o zmenu z vonkajšieho tieňa na vnútorný. |
| h-tieň | Požadovaná hodnota. Nastaví umiestnenie vodorovného tieňa. Záporné hodnoty sú povolené. |
| v-tieň | Požadovaná hodnota. Nastaví umiestnenie vertikálneho tieňa. Záporné hodnoty sú povolené. |
| blur-radius | Voliteľná hodnota. Nastavuje polomer rozostrenia. Čím vyššia hodnota, tým väčšie rozmazanie, čím sa tieň zväčší a zosvetlí. Ak hodnota nie je zadaná, hodnota bude 0 (ostré - zreteľné tiene). Záporné hodnoty nie sú povolené. |
| rádius šírenia | Voliteľná hodnota. Veľkosť tieňa (polomer roztiahnutia tieňa). Pri kladných hodnotách sa tieň rozšíri a pri záporných sa zmenšuje. Ak nie je zadaná žiadna hodnota, hodnota bude 0 (tieň zodpovedá veľkosti prvku). |
| farba | Voliteľná hodnota. Definuje farbu tieňa (HEX, RGB, RGBA, HSL, HSLA, "Preddefinované farby"). Predvolená hodnota je čierna. |
Hlavné body, ktoré musíte pochopiť, aby ste vytvorili tiene pre prvky, sú:
Chcel by som upriamiť vašu pozornosť na skutočnosť, že vlastnosť box-shadow v súčasnosti podporujú všetky moderné prehliadače:
| Nehnuteľnosť | Opera | IExplorer | Hrana |
|||
|---|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Ak chcete rozšíriť podporu pre niektoré prehliadače vrátane mobilných iOS 3.2 – 4.3 A Android 2.1 – 3, potom sa odporúča použiť predpony výrobcu a použiť nasledujúcu syntax (v príkladoch v článku bude syntax použitá iba pre moderné prehliadače):
-webkit-box-shadow : hodnota ; /* Safari 3.1 – 4, IOS 3.2 – 4.3 a Android 2.1 – 3 */-moz-box-shadow : hodnota ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* tabuľka hore */Prejdime k praxi a začnime jednoduchý príklad, v ktorom k prvkom pridáme jeden tieň:
Výsledok nášho príkladu:
Používanie viacerých tieňov
V nasledujúcom príklade navrhujem zvážiť zaujímavý efekt miešania farieb, ktorý možno dosiahnuť pri použití viacerých tieňov:
- Dva bloky s pevnou šírkou a výškou (15 em a 10 em), pridané vypchávky na všetkých stranách (2 em) a nastavenie blokov tak, aby boli blokové, aby ich bolo možné zoradiť.
- Pre najprv blok s triedou .test sme naznačili štyri tiene s rôznymi horizontálnymi a vertikálnymi hodnotami tieňov, takže prvok má na všetkých stranách rôzne tiene. Polomer rozostrenia pre všetky tiene bol nastavený na rovnaký. Farba každého tieňa je iná a určuje sa pomocou preddefinovaných farieb.
- Pre druhý blok s triedou .test2 sme naznačili štyri tiene s rôznymi horizontálnymi a vertikálnymi hodnotami tieňov. Polomer rozostrenia pre všetky tiene bol nastavený na rovnaký, zatiaľ čo roztiahnutie tieňa bolo nastavené na zápor, čo viedlo k zníženiu samotného tieňa. Farba každého tieňa je iná a je špecifikovaná pomocou systému RGBA.
Výsledok nášho príkladu:
Použitie tieňov pre obrázky
Posledný príklad tohto článku sa zameria na použitie tieňov pre obrázky. Chcel by som okamžite upozorniť na skutočnosť, že priamo označujú tieň pre HTML prvok Nebude to fungovať, ale máme možnosť zadať obrázok ako pozadie pre prvok, ktorý nás zaujíma, a potom tomuto prvku priradiť tieň, ktorý potrebujeme.
Podrobne sa na prácu s obrázkami na pozadí pozrieme v učebnicovom článku „“ a teraz, aby sme ukončili štúdium používania tieňov, sa toho dotkneme povrchne a obrázok použijeme ako pozadie prvku v nasledujúcom texte. príklad:
- Dva bloky s pevnou šírkou a výškou (237px a 232px), pridali okraje na všetky strany (2em) a nastavili bloky ako blokové, aby ich bolo možné zarovnať. Veľkosť bloku 237 x 232 pixelov sme nastavili na veľkosť obrázka, aby sme v tejto fáze tréningu nemuseli upravovať veľkosť obrázka tak, aby sa zmestil do prvku a ovplyvňovali tie vlastnosti CSS, ktoré sa plánujú študovať v neskoršej fáze ( v učebnicovom článku " ").
- Pre najprv blok s triedou .test Pre horizontálny a vertikálny tieň sme určili nulovú hodnotu, no zároveň sme určili polomer rozostrenia 50px a rozšírili sme ho nastavením polomeru roztiahnutia na 10px. Farba tieňa bola označená vopred definovanou farbou (fialová). Okrem toho sme uviedli v inzeráte kľúčové slovo inset , čo spôsobí, že tieň padne do vnútra prvku. Inými slovami, vytvorili sme vnútorný tieň živlu.
- Pre druhý blok s triedou .test2 Pre horizontálny a vertikálny tieň sme určili nulovú hodnotu, no zároveň sme určili polomer rozostrenia 50px a rozšírili sme ho nastavením polomeru roztiahnutia na 10px. Farba tieňa sa určuje v režime RGBA.
Výsledok nášho príkladu:
Ryža. 98 Príklad použitia tieňov pre obrázky v CSS (vlastnosť box-shadow)
Otázky a úlohy k téme
Skôr než prejdete na ďalšiu tému, dokončite cvičnú úlohu:
Ak máte problémy s dokončením cvičnej úlohy, vždy môžete otvoriť príklad v samostatnom okne a prezrieť si stránku, aby ste pochopili, aký kód CSS bol použitý.
2016-2020 Denis Bolshakov, môžete na stránku posielať pripomienky a návrhy na adresu [email protected]
Tieň pod prvkom bloku na stránke sa zvyčajne používa na vytvorenie trojrozmerného efektu, na upútanie pozornosti na prvok alebo ako súčasť dizajnu. Malý tieň pod prvkami tiež dodáva stránke objem a hĺbku.
Ak chcete pridať tieň, použite vlastnosť box-shadow, ktorá má šesť hodnôt, z ktorých sú povinné iba dve. Na obr. Obrázok 1 zobrazuje vlastnosť box-shadow so všetkými možnými hodnotami, ktoré sú očíslované na ich identifikáciu.
Ryža. 1. Hodnoty vlastnosti box-shadow
- kľúčové slovo inset nastavuje tieň vo vnútri prvku;
- posunúť tieň vodorovne (5px - vpravo, -5px - vľavo);
- vertikálny posun (5px - dole, -5px - hore);
- polomer rozostrenia tieňa (0 - ostrý tieň);
- roztiahnutie tieňa (5px - roztiahnutie, -5px - zmenšenie);
- farba tieňa.
Je potrebné zadať iba horizontálny a vertikálny posun, všetky ostatné parametre sa berú štandardne. V tomto prípade bude tieň ostrý bez rozmazania alebo čiernej.
Kombináciou rôznych parametrov a ich hodnôt môžete získať širokú škálu typov tieňov. V tabuľke 1 zobrazuje kód a výsledok, ku ktorému vedie.
| kód | Výsledok | Popis |
|---|---|---|
| box-shadow: 5px 5px; | Ostrý tieň vpravo a dole. | |
| box-shadow: -5px -5px; | Ostrý tieň vľavo a hore. | |
| box-shadow: 0 0 5px; | Rozmazaný tieň okolo prvku. | |
| box-shadow: 0 0 5px 2px; | Rozšírte tieň o 2 pixely. | |
| box-shadow: 0 0 5px 2px červená; | Červená žiara okolo prvku. | |
| box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5); | Priesvitný tieň. | |
| box-shadow: inset 0 0 6px; | Tieň vo vnútri. |
Ako je zrejmé z tabuľky, posun tieňa nemusí byť špecifikovaný v pixeloch, aj keď je to vhodné. Farba tieňa môže byť špecifikovaná v akomkoľvek dostupnom formáte, takže na získanie priesvitného tieňa je vhodná RGBA formát, takýto tieň bude vyzerať dobre na akomkoľvek pozadí. Príklad 1 ukazuje, ako to urobiť.
Príklad 1: Tieň na obrázku na pozadí
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Nechoďte proti nepriateľským transparentom, keď sú v úplnom poriadku; neútočte na nepriateľský tábor, keď je nedobytný; toto je manažment zmien.
Sun Tzu, prekl. Nikolaj Konrád
Výsledok tohto príkladu je znázornený na obr. 2. Tieň sleduje zaoblenie rohov kvádra.
Ryža. 2. Vzhľad tieňa na obrázku v pozadí
Pri pridávaní „širokého“ tieňa si uvedomte, že môže presahovať viditeľné okraje okna prehliadača, čo môže viesť k zobrazeniu vodorovného posúvača.
K pseudoprvkom je možné pridať aj tiene, čo sa niekedy vyžaduje pri zložitých rozloženiach. Na obr. Obrázok 3 zobrazuje blok hlavičky s pridaným tieňom. Aby ste sa vyhli akýmkoľvek čiaram na križovatke, musíte použiť pseudoprvok ::after a pridať k nemu tieň.
Ryža. 3. Blok s tieňom
Príklad 2 ukazuje vytvorenie takéhoto bloku.
Príklad 2. Blok s tieňom
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Smerovanie
Element môže mať viac ako jeden tieň, ale niekoľko naraz, ich parametre sú uvedené oddelené čiarkami v hodnote vlastnosti box-shadow. Príklad 3 ukazuje, ako pridať dvojitý tieň ku všetkým obrázkom.
Príklad 2. Blok s tieňom
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. 4.
Ryža. 4. Dvojitý tieňový obraz
Prvý tieň je zobrazený naľavo od obrázka s polomerom rozostrenia 20px, jeho veľkosť je zmenšená o štvrtý parameter (-20px). Parametre druhého tieňa sú uvedené za desatinnou čiarkou, tieň je zobrazený napravo od obrázku a je tiež zmenšený kvôli symetrii.