Zásadně důležité je pořadí nahrávání. První hodnota je vždy posunutí podél osy X, druhá - podél osy Y.
Pokud odsazení podél jedné z os není potřeba, nastavte jej na nulu:
Class(box-shadow: 0 8px;) – posouvá stín pouze podél osy Y
Výsledek
Class(box-shadow: 8px 8px;) – posun podél obou os
Výsledek
Záporná hodnota pro osy box-shadow
Stín se bude pohybovat opačným směrem:
Class(box-shadow: -8px 8px;) – posun stínu se zápornou hodnotou podél osy X
Výsledek
Poloměr rozostření stínu
Třetí parametr vlastnosti box-shadow. Pokud není zadáno, hodnota je 0 a velikost stínu se rovná velikosti prvku, na který je aplikován.
Class(box-shadow: 0 48px 0;) – stín duplikuje rozměry prvku, na který je aplikován
Výsledek
Když je hodnota větší než nula, okraje ztrácejí zřetelnost, stín se zvětšuje a opticky zesvětluje. Rozostření se aplikuje ze všech stran:
Class(box-shadow: 0 0 8px;) – žádný posun, pouze rozostření
Výsledek
Class(box-shadow: 0 8px 8px;) – Posun a rozostření osy Y
Výsledek
Záporná hodnota je považována za chybu a stín se vůbec nezobrazí.
Poloměr roztažení stínu
Čtvrtý parametr vlastnosti box-shadow. Změní velikost stínu vzhledem k prvku. Protahuje se ve všech směrech:
Class(box-shadow: 0 0 0 8px;) – žádné posunutí nebo rozmazání, pouze roztažení
Výsledek
V v tomto případě stín je na šířku a výšku o 16 pixelů větší než prvek: 8 pixelů vlevo + 8 pixelů vpravo a 8 pixelů nahoře + 8 pixelů dole.
Záporná hodnota roztažení stínu v CSS
Stín se neroztahuje, ale zužuje se na všechny strany o zadanou hodnotu:
Class(box-shadow: 0 16px 0 -8px;) – sníží stín zápornou hodnotou
Výsledek
Barva stínu
Ve výchozím nastavení barva stínu duplikuje barvu písma: jako ve výše uvedených příkladech.
Barva stínu je určena v jakémkoli dostupném formátu CSS:
- #ff0009
- rgb(255; 0; 9)
- hsl(358, 100 %, 50 %);
Dejte prvku modrý stín:
Class(box-shadow: 0 8px #3a8fe7;)
Výsledek
Vnitřní stín
Parametr vložka zobrazí stín uvnitř bloku.
Na rozdíl od výše uvedených možností zde není striktní pořadí psaní. Obě možnosti poskytnou stejný výsledek:
Box-shadow: 0 8px #3a8fe7 inset; box-shadow: inset 0 8px #3a8fe7;
Výsledek
Druhá možnost je snáze pochopitelná při čtení kódu.
Několik stínů
Zadává se více stínů oddělených čárkami. Pořadí zobrazení shora dolů:
Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )
Výsledek
Pokud vyměníte místa, modrý stín nebude vidět:
Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )
Výsledek
Vnitřní a vnější stín jsou nastaveny současně:
Class( box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )
Výsledek
Zaoblený stín
Pokud je prvku přiřazena vlastnost hraniční poloměr, stín bude mít zaoblené rohy.
Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )
Výsledek
Nastavením roztažení stínu zvýšíme jeho zaoblení. Například poloměr okraje je 8 pixelů a roztažení stínu je 4.
8+4=12px je poloměr zaoblení stínu.
Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )
Výsledek
Stejný princip platí pro zmenšování stínu, když je hodnota záporná.
8+(-4)=4px – dostaneme dvakrát menší zaoblení stínu.
Pokud je komprese stínu větší než border-radius, dostaneme stín s pravými úhly. Například komprese je 16px.
8+(-16)=(-8), ale zaoblení nemůže mít zápornou hodnotu a použije se nula.
Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )
Výsledek
Vlastnost CSS box-shadow Podporováno všemi oblíbenými prohlížeči kromě Opery Mini.
Dnes se naučíme, jak vytvořit CSS stíny bez obrázků. Po dokončení tohoto tutoriálu již nebudete potřebovat generátor stínů CSS.
Jaká je hlavní výhoda stínů vytvořených pomocí Nápověda CSS 3, jde o jednoduchost implementace a snížení počtu požadavků na server (protože již nepoužíváme obrázky). K vytvoření stínu CSS potřebujeme tag div a vlastnost CSS box-shadow. Nebudete potřebovat žádné další označení, protože vytvoříme pseudo prvky :after a :before, které umístíme za hlavní objekt (div s třídou blok).
Podívejte se na HTML kód, pro který vytvoříme CSS3 stín:
Obsah
Dále můžete vidět hotové příklady a kód potřebný k jejich implementaci. Abychom minimalizovali text na stránce, vynecháme CSS vlastnosti s předponami prohlížeče. Celý kód Můžete jej zobrazit kliknutím na odkaz „Příklad“ odpovídající pří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; dole:12px; vlevo:10px; šířka:50%; výška:55%; max-šířka: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); )
Pomocí stínu můžete poskytnout perspektivu bloku. Viz pří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:absolute; z-index:-2; ) .block:before ( left:80px; bottom:5px ; width:50%; height:35%; max-width:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100% ; ) .block:after ( display:none; )
CSS stín pro zvýšený blok. Viz pří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:absolute; z-index:-2; )
Příklad stínu CSS3 pro vertikálně složený blok. Viz pří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:absolute; 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:absolute; 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; )
Příklad stínu CSS3 pro vodorovně složený blok. Viz pří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) vložka; ) .blok:před, .blok:po (obsah:""; pozice:absolutní; z-index:-2; ) .blok:před (nahoře:50%; dole: 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:absolute; 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 stín pro otočený blok. Viz pří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.šířka:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0,7); transform:rotate(-3deg); ) .block:after ( right:10px; left: auto; transform:rotate(3deg); ) Dobrý den, milí čtenáři. Dnes budeme dělat s vámi krásný stín pro bloky pomocí CSS. Myslím, že to pro vás bude velmi užitečné, zvláště pokud vytváříte šablony. A bloky se stíny vypadají velmi atraktivně a moderně.
Podpora prohlížeče
V podstatě všechny moderní prohlížeče podporují stínové efekty:
- Internet Explorer 9.0 a vyšší;
- Firefox 3.5 a vyšší;
- Chrome 1 a vyšší;
- Safari 3 a vyšší;
- Opera 10.5 a vyšší.
Rád bych také zmínil jeden důležitý bod: pro některé prohlížeče budeme používat určité předpony. Používá se pro Firefox -moz-, pro Chrome a Safari musíte použít předponu - webkit.
No a teď přejděme k tomu nejzajímavějšímu. Podívejme se na všechny stíny zvlášť, efektů bude 8.
Stínový efekt 1
V tomto příkladu je stín bloku dole.
HTML
Účinek 1
CSS
text-align:center; poloha:relativní; nahoře:80px; ) .box ( šířka:70 %; výška:200px; pozadí:#FFF; okraj:40px auto; ) /*========================= ========== * Účinek 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; )Stínový efekt 2
V tomto příkladu jde stín z bloku doleva a doprava, ale uprostřed žádný není. Ukazuje se to jako velmi zajímavý efekt.
HTML
Účinek 2
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 2 * == ==================================== =========================*/ .effect2 ( pozice: relativní; ) .effect2:before, .effect2:after ( z-index: - 1; pozice: absolutní; obsah: ""; dole: 15px; vlevo: 10px; šířka: 50%; nahoře: 80%; max -width:300px; pozadí: #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čit(-3deg); -ms-transform:otočit(-3deg); transformovat:otočit(-3deg); ) . effect2:after ( -webkit-transform:otočit(3deg); -moz-transform: otočit (3 stupně); -o-transform: otočit (3 stupně); -ms-transform: otočit (3 stupně); transformovat: otočit (3 stupně) ; vpravo: 10px; vlevo: auto; )Stínový efekt 3
Zde je stín z bloku pouze vlevo.
HTML
Účinek 3
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Účinek 3 * == ==================================== =========================*/ .effect3 ( pozice: relativní; ) .effect3:before ( z-index: -1; pozice: absolutní ; obsah: ""; dole: 15px; vlevo: 10px; šířka: 50%; nahoře: 80%; max-width:300px; pozadí: #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čit(-3deg); transformovat: otočit (-3deg); )Stínový efekt 4
Stín vpravo.
HTML
Účinek 4
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 4 * == ==================================== =========================*/ .effect4 ( pozice: relativní; ) .effect4:after ( z-index: -1; pozice: absolutní ; obsah: ""; dole: 15px; vpravo: 10px; vlevo: auto; šířka: 50%; nahoře: 80%; max- šířka:300px; pozadí: #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: otáčet (3 stupně); -ms-transformovat: otáčet (3 stupně); transformovat: otáčet (3 stupně); )Stínový efekt 5
V tomto případě se stín na obou stranách posunul směrem dolů silněji.
HTML
Účinek 5
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Efekt 5 * == ==================================== =========================*/ .effect5 ( pozice: relativní; ) .effect5:before, .effect5:after ( z-index: - 1; pozice: absolutní; obsah: ""; dole: 25px; vlevo: 10px; šířka: 50%; nahoře: 80%; max -width:300px; pozadí: #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 -transformovat: otáčet (-8 stupňů); -ms-transformovat: otáčet (-8 stupňů); transformovat: otáčet (-8 stupňů); ) . effect5:after ( -webkit-transform: otáčet (8 stupňů); -moz-transformovat: otáčet (8 stupňů); -o-transform: otočit (8 stupňů); -ms-transform: otočit (8 stupňů); transformovat: otočit (8 stupňů) ; vpravo: 10px; vlevo: auto; )Stínový efekt 6
Zde je efekt zakřivených stínů ve spodní části bloku.
HTML
Účinek 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) vložka; -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čit(3deg); -o-transform:skew(8deg)otočit(3deg); transform:skew(8deg) rotation(3deg); )Stínový efekt 7
Stejný efekt je jen stín pod a nad blokem.
HTML
Účinek 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) vložka; -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čit(3deg); -o-transform:skew(8deg)otočit(3deg); transform:skew(8deg) rotation(3deg); )Stínový efekt 8
Efekt zakřivených stínů na stranách bloku.
HTML
Účinek 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) vložka; -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čit(3deg); -o-transform:skew(8deg)otočit(3deg); transform:skew(8deg) rotation(3deg); )To je vše, drazí přátelé. Pokud něčemu nerozumíte, určitě se zeptejte v komentářích. Brzy se uvidíme.
S příchodem standardu CSS 3 představil vlastnost box-shadow, která se stala široce používanou mezi webovými vývojáři, protože usnadňuje přidání jednoho nebo více stínů do rámečku prvku, aby se dosáhlo požadovaného vizuálního efektu.
V předchozím článku jsme se podívali na vlastnost border-radius, pomocí ní můžete získat stín se zaoblenými rohy. Analogicky s textovým stínem (text-shadow) lze vytvořit více stínů, podle kterých se aplikují osa z zepředu dozadu (s prvním daným stínem nahoře).
Podívejme se blíže na syntaxi této moderní vlastnosti:
Zvažme v pořadí možné hodnoty této vlastnosti:
| Význam | Popis |
|---|---|
| žádný | Stín se nezobrazuje. Toto je výchozí hodnota. |
| vložka | Volitelná hodnota. Pokud tato hodnota není zadána (výchozí), stín bude na vnější straně prvku a vytvoří efekt vyboulení prvku. Pokud je přítomno klíčové slovo (hodnota), stín spadne dovnitř prvku a vytvoří promáčknutý efekt. Jinými slovy, jde o změnu z vnějšího stínu do vnitřního. |
| h-stín | Požadovaná hodnota. Nastaví umístění vodorovného stínu. Záporné hodnoty jsou povoleny. |
| v-stín | Požadovaná hodnota. Nastaví umístění svislého stínu. Záporné hodnoty jsou povoleny. |
| poloměr rozostření | Volitelná hodnota. Nastavuje poloměr rozostření. Čím vyšší hodnota, tím větší rozostření, takže stín bude větší a světlejší. Pokud hodnota není uvedena, bude hodnota 0 (ostré - výrazné stíny). Záporné hodnoty nejsou povoleny. |
| poloměr šíření | Volitelná hodnota. Velikost stínu (poloměr roztažení stínu). S kladnými hodnotami se stín rozšíří a se zápornými hodnotami se zmenšuje. Pokud není zadána žádná hodnota, bude hodnota 0 (stín odpovídá velikosti prvku). |
| barva | Volitelná hodnota. Definuje barvu stínu (HEX, RGB, RGBA, HSL, HSLA, "Předdefinované barvy"). Výchozí hodnota je černá. |
Hlavní body, které musíte pochopit, abyste vytvořili stíny pro prvky, jsou:
Chtěl bych upozornit na skutečnost, že vlastnost box-shadow je v současné době podporována všemi moderními prohlížeči:
| Vlastnictví | Opera | IExplorer | Okraj |
|||
|---|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Pokud chcete rozšířit podporu pro některé prohlížeče včetně mobilních iOS 3.2 – 4.3 A Android 2.1–3, pak se doporučuje používat předpony výrobce a používat následující syntaxi (v příkladech v článku bude syntaxe použita pouze pro moderní prohlížeč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 ; /* tabulka nahoře */Pojďme k praxi a začněme jednoduchý příklad, ve kterém přidáme jeden stín k prvkům:
Výsledek našeho příkladu:
Použití více stínů
V následujícím příkladu navrhuji zvážit zajímavý efekt míchání barev, kterého lze dosáhnout při použití více stínů:
- Dva bloky pevné šířky a výšky (15 em a 10 em), přidané vycpávky na všech stranách (2 em) a nastavit bloky tak, aby byly blokové, aby je bylo možné zarovnat.
- Pro První blok s třídou .test jsme naznačili čtyři stíny s různými hodnotami horizontálního a vertikálního stínu, takže prvek má různé stíny na všech stranách. Poloměr rozostření pro všechny stíny byl nastaven na stejný. Barva každého stínu je odlišná a je určena pomocí předdefinovaných barev.
- Pro druhý blok s třídou .test2 jsme naznačili čtyři stíny s různými hodnotami horizontálního a vertikálního stínu. Poloměr rozostření pro všechny stíny byl nastaven na stejný, zatímco roztažení stínu bylo nastaveno na zápor, což vedlo ke snížení samotného stínu. Barva každého stínu je odlišná a je specifikována pomocí systému RGBA.
Výsledek našeho příkladu:
Použití stínů pro obrázky
Poslední příklad tohoto článku se zaměří na použití stínů pro obrázky. Chtěl bych okamžitě upozornit na skutečnost, že přímo naznačují stín pro HTML prvek Nebude to fungovat, ale máme možnost zadat obrázek jako pozadí pro prvek, který nás zajímá, a pak tomuto prvku přiřadit stín, který potřebujeme.
Práci s obrázky na pozadí se podrobně podíváme v učebnicovém článku "", a nyní, abychom ukončili studium používání stínů, se toho dotkneme povrchně a obrázek použijeme jako pozadí prvku v následujícím textu příklad:
- Dva bloky s pevnou šířkou a výškou (237px a 232px), přidány okraje pro všechny strany (2em) a nastavit bloky jako blokové, aby bylo možné je zarovnat. Velikost bloku 237 x 232 pixelů jsme nastavili na velikost obrázku, takže v této fázi tréninku jsme nemuseli měnit měřítko obrázku tak, aby odpovídal prvku a ovlivňovat ty vlastnosti CSS, které se plánují studovat v pozdější fázi. (v učebnicovém článku " ").
- Pro První blok s třídou .test Zadali jsme nulovou hodnotu pro horizontální a vertikální stín, ale zároveň jsme určili poloměr rozostření 50px a rozšířili ho nastavením poloměru roztažení na 10px. Barva stínu byla označena předem definovanou barvou (fialová). Navíc jsme uvedli v inzerátu klíčové slovo inset , což způsobí, že stín padne dovnitř prvku. Jinými slovy, vytvořili jsme vnitřní stín živlu.
- Pro druhý blok s třídou .test2 Zadali jsme nulovou hodnotu pro horizontální a vertikální stín, ale zároveň jsme určili poloměr rozostření 50px a rozšířili ho nastavením poloměru roztažení na 10px. Barva stínu je určena v režimu RGBA.
Výsledek našeho příkladu:
Rýže. 98 Příklad použití stínů pro obrázky v CSS (vlastnost box-shadow)
Otázky a úkoly k tématu
Než přejdete k dalšímu tématu, dokončete cvičný úkol:
Pokud máte potíže s dokončením cvičného úkolu, můžete vždy otevřít příklad v samostatném okně a prohlédnout si stránku, abyste pochopili, jaký kód CSS byl použit.
2016-2020 Denis Bolshakov, můžete posílat komentáře a návrhy na web na adresu [email protected]
Stín pod prvkem bloku na stránce se obvykle používá k vytvoření trojrozměrného efektu, k upoutání pozornosti na prvek nebo jako součást návrhu. Malý stín pod prvky také dodává stránce objem a hloubku.
Chcete-li přidat stín, použijte vlastnost box-shadow, která má šest hodnot, z nichž jsou povinné pouze dvě. Na Obr. Obrázek 1 ukazuje vlastnost box-shadow se všemi možnými hodnotami, očíslovanými pro jejich identifikaci.
Rýže. 1. Hodnoty vlastnosti box-shadow
- klíčové slovo inset nastavuje stín uvnitř prvku;
- posunout stín vodorovně (5px - vpravo, -5px - vlevo);
- vertikální posun (5px - dolů, -5px - nahoru);
- poloměr rozostření stínu (0 - ostrý stín);
- roztažení stínu (5px - roztažení, -5px - zmenšení);
- barva stínu.
Je nutné zadat pouze horizontální a vertikální posun, všechny ostatní parametry budou brány jako výchozí. V tomto případě bude stín ostrý bez rozmazání nebo černé.
Kombinací různých parametrů a jejich hodnot můžete získat širokou škálu typů stínů. V tabulce 1 ukazuje kód a výsledek, ke kterému vede.
| Kód | Výsledek | Popis |
|---|---|---|
| box-shadow: 5px 5px; | Ostrý stín vpravo a dole. | |
| box-shadow: -5px -5px; | Ostrý stín vlevo a nahoře. | |
| box-shadow: 0 0 5px; | Rozmazaný stín kolem prvku. | |
| box-shadow: 0 0 5px 2px; | Rozšiřte stín o 2 pixely. | |
| box-shadow: 0 0 5px 2px červená; | Červená záře kolem prvku. | |
| box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5); | Průsvitný stín. | |
| box-shadow: inset 0 0 6px; | Stín uvnitř. |
Jak je vidět z tabulky, posun stínu nemusí být zadán v pixelech, i když je to vhodné. Barva stínu může být specifikována v jakémkoli dostupném formátu, takže pro získání průsvitného stínu je vhodná formát RGBA, takový stín bude vypadat dobře na jakémkoli pozadí. Příklad 1 ukazuje, jak to udělat.
Příklad 1: Stín na obrázku pozadí
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Nechoďte proti nepřátelským transparentům, když jsou v naprostém pořádku; neútočit na nepřátelský tábor, když je nedobytný; to je management změn.
Sun Tzu, přel. Nikolaj Konrád
Výsledek tohoto příkladu je znázorněn na Obr. 2. Stín sleduje zaoblení rohů kvádru.
Rýže. 2. Vzhled stínu na obrázku pozadí
Při přidávání „širokého“ stínu si uvědomte, že může přesahovat viditelné okraje okna prohlížeče a způsobit tak zobrazení vodorovného posuvníku.
K pseudoprvkům lze také přidat stíny, což je někdy vyžadováno u složitých rozvržení. Na Obr. Obrázek 3 ukazuje blok záhlaví s přidaným stínem. Chcete-li se vyhnout jakýmkoli čarám na křižovatce, musíte použít pseudoprvek ::after a přidat k němu stín.
Rýže. 3. Blok se stínem
Příklad 2 ukazuje vytvoření takového bloku.
Příklad 2. Blok se stínem
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Nadpis
Prvek může mít více než jeden stín, ale několik najednou, jejich parametry jsou uvedeny oddělené čárkami v hodnotě vlastnosti box-shadow. Příklad 3 ukazuje, jak přidat dvojitý stín ke všem obrázkům.
Příklad 2. Blok se stínem
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Výsledek tohoto příkladu je znázorněn na Obr. 4.
Rýže. 4. Obraz dvojitého stínu
První stín je zobrazen nalevo od obrázku s poloměrem rozostření 20px, jeho velikost je zmenšena o čtvrtý parametr (-20px). Parametry druhého stínu jsou uvedeny za desetinnou čárkou, stín je zobrazen napravo od obrázku a je také zmenšen kvůli symetrii.