Css3 box shadow příklady. Vnitřní stíny v CSS
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í a černé barvy.
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 pohodlné. Barvu stínu lze zadat v libovolném dostupném formátu, například pro získání průsvitného stínu je vhodný formát RGBA 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 praporům nepřítele, když jsou v dokonalé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
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.
Stíny mohou být také přidány do pseudo-prvků, což je někdy vyžadováno pro komplexní 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
Záhlaví
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 pro symetrii.
Běžné stíny lze snadno implementovat pomocí box-shadow nebo text-shadow. Ale co když potřebujete vytvořit vnitřní stíny? Tento článek popisuje, jak vytvořit tyto stíny pomocí několika řádků kódu.
Syntax
Nejprve se podívejme na dva hlavní způsoby implementace stínů v CSS.box-shadow
Design box-shadow obsahuje několik různých významů:
Horizontální odsazení A vertikální odsazení- horizontální a vertikální posunutí, resp. Tyto hodnoty udávají, kterým směrem bude objekt vrhat svůj stín:
Poloměr rozostření A poloměr šíření trochu složitější. jaký je v tom rozdíl? Podívejme se na příklad se dvěma prvky, kde hodnoty poloměr rozostření lišit se:
Okraj stínu je jednoduše rozmazaný. S různými hodnotami poloměr šíření vidíme následující:
V tomto případě vidíme, že stín je rozptýlen na velké ploše. Pokud nezadáte hodnotu poloměr rozostření A poloměr šíření, pak se budou rovnat 0.
stín textu
Syntaxe je velmi podobná box-shadow:
Významy jsou podobné, ale ne rozprostřený stín. Příklad použití:
Vložka v box-shadow
Chcete-li „převrátit“ stín uvnitř objektu, musíte přidat vložka v CSS:
Jakmile pochopíte základní syntaxi box-shadow, je velmi snadné pochopit, jak implementovat vnitřní stíny. Hodnoty jsou stále stejné, můžete přidat barvu (RGB v hex):
Barva je ve formátu RGB, hodnota alfa je zodpovědná za průhlednost stínu:
Obrázky se stíny
Přidání vnitřního stínu do obrázku je o něco obtížnější než přidání běžného stínu div. Pro začátek zde je obvyklý kód obrázku: 
Je logické předpokládat, že můžete přidat stín takto:
Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Ale stín není vidět:
Existuje několik způsobů, jak tento problém vyřešit, z nichž každý má své klady a zápory. Podívejme se na dva z nich. První je zabalit obrázek do běžného div:
Div ( výška: 200px; šířka: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0,9); ) img ( výška: 200px; šířka: 400px; pozice: relativní; z-index: -2 ;
Vše funguje, ale musíme přidat trochu HTML a CSS značení navíc. Druhým způsobem je nastavit obrázek jako pozadí požadovaného bloku:
Div ( výška: 200px; šířka: 400px; pozadí: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )
Při použití vnitřních stínů se může stát toto:
Vložit do stínu textu
Chcete-li implementovat vnitřní stín textu, jednoduše přidejte do kódu vložka nefunguje:
Chcete-li vyřešit, nejprve aplikujte na záhlaví h1 Nastavte tmavé pozadí a světlý stín:
H1 ( barva pozadí: #565656; barva: průhledná; stín textu: 0px 2px 3px rgba(255,255,255,0,5); )
Co se stane:
Přidání tajné přísady klip na pozadí který ořízne vše, co přesahuje text (na tmavé pozadí):
H1 ( barva pozadí: #565656; barva: průhledná; stín textu: 0px 2px 3px rgba(255,255,255,0,5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;
Ukázalo se téměř přesně to, co jsme potřebovali. Nyní text jen trochu ztmavíme (alfa) a výsledkem je:
Běžné stíny lze snadno implementovat pomocí box-shadow nebo text-shadow. Ale co když potřebujete vytvořit vnitřní stíny? Tento článek popisuje, jak vytvořit tyto stíny pomocí několika řádků kódu.
Syntax
Nejprve se podívejme na dva hlavní způsoby implementace stínů v CSS.
box-shadow
Design box-shadow obsahuje několik různých významů:
Horizontální odsazení A vertikální odsazení— horizontální a vertikální posunutí. Tyto hodnoty udávají, kterým směrem bude objekt vrhat svůj stín:
Poloměr rozostření A poloměr šíření trochu složitější. jaký je v tom rozdíl? Podívejme se na příklad se dvěma prvky, kde hodnoty poloměr rozostření lišit se:
Okraj stínu je jednoduše rozmazaný. S různými hodnotami poloměr šíření vidíme následující:
V tomto případě vidíme, že stín je rozptýlen na velké ploše. Pokud nezadáte hodnotu poloměr rozostření A poloměr šíření, pak se budou rovnat 0.
stín textu
Syntaxe je velmi podobná box-shadow:
Významy jsou podobné, ale ne rozprostřený stín. Příklad použití:
Vložka v box-shadow
Chcete-li „převrátit“ stín uvnitř objektu, musíte přidat vložka v CSS:
Jakmile pochopíte základní syntaxi box-shadow, je velmi snadné pochopit, jak implementovat vnitřní stíny. Hodnoty jsou stále stejné, můžete přidat barvu (RGB v hex):
Barva je ve formátu RGB, hodnota alfa je zodpovědná za průhlednost stínu:
Obrázky se stíny
Přidání vnitřního stínu do obrázku je o něco obtížnější než přidání běžného stínu div. Pro začátek zde je obvyklý kód obrázku:
Je logické předpokládat, že můžete přidat stín takto:
obr. (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0,5);
}
Ale stín není vidět:
Existuje několik způsobů, jak tento problém vyřešit, z nichž každý má své klady a zápory. Podívejme se na dva z nich. První je zabalit obrázek do běžného div:
Div (
výška: 200px;
šířka: 400px;
}
img (
výška: 200px;
šířka: 400px;
poloha: relativní;
z-index: -2;
}
Vše funguje, ale musíme přidat trochu HTML a CSS značení navíc. Druhým způsobem je nastavit obrázek jako pozadí požadovaného bloku:
Div (
výška: 200px;
šířka: 400px;
pozadí: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0,9);
}
Při použití vnitřních stínů se může stát toto:
Vložit do stínu textu
Chcete-li implementovat vnitřní stín textu, jednoduše přidejte do kódu vložka nefunguje:
Chcete-li vyřešit, nejprve aplikujte na záhlaví h1 Nastavte tmavé pozadí a světlý stín:
H1 (
barva pozadí: #565656;
barva: transparentní;
}
Co se stane:
Přidání tajné přísady klip na pozadí který ořízne vše, co přesahuje text (na tmavé pozadí):
H1 (
barva pozadí: #565656;
barva: transparentní;
text-shadow: 0px 2px 3px rgba(255,255,255,0,5);
-webkit-background-clip:text;
-moz-background-clip: text;
background-clip: text;
}
Ukázalo se téměř přesně to, co jsme potřebovali. Teď jen trochu ztmavíme text (alfa) a je to.
Přidá k prvku stín. Je možné použít několik stínů s uvedením jejich parametrů oddělených čárkami, při aplikaci stínů bude první stín v seznamu vyšší, poslední nižší. Pokud je pro prvek zadán poloměr zaoblení pomocí vlastnosti border-radius, pak bude mít stín také zaoblené rohy. Přidáním stínu se zvětší šířka prvku, takže se v prohlížeči může objevit vodorovný posuvník.
Stručné informace
Syntax
Box-shadow: žádný |<тень> [,<тень>]*
Kde<тень>:
vložka<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Označení
| Popis | Příklad | |
|---|---|---|
| <тип> | Označuje typ hodnoty. | <размер> |
| A && B | Hodnoty musí být uvedeny v uvedeném pořadí. | <размер> && <цвет> |
| A | B | Označuje, že musíte vybrat pouze jednu hodnotu z navržených hodnot (A nebo B). | normální | malokapitálky |
| A || B | Každá hodnota může být použita samostatně nebo společně s jinými v libovolném pořadí. | šířka || počítat |
| Hodnoty skupin. | [ plodina || křížek] | |
| * | Opakujte nula nebo vícekrát. | [,<время>]* |
| + | Opakujte jednou nebo vícekrát. | <число>+ |
| ? | Zadaný typ, slovo nebo skupina je volitelný. | vložka? |
| (A, B) | Opakujte alespoň A, ale ne více než Bkrát. | <радиус>{1,4} |
| # | Opakujte jednou nebo vícekrát odděleně čárkami. | <время># |
Hodnoty
none Zruší přidání stínu. inset Stín je nakreslen uvnitř prvku.<сдвиг по x>Horizontální odsazení stínu vzhledem k prvku. Kladná hodnota tohoto parametru nastavuje posun stínu doprava, záporná hodnota doleva.<сдвиг по y>Vertikální posun stínu vzhledem k prvku. Kladná hodnota posouvá stín dolů, záporná nahoru.<размытие>Nastaví poloměr rozostření stínu. Čím vyšší je tato hodnota, tím více je stín vyhlazený, širší a světlejší. Pokud tento parametr není zadán, výchozí je nastaveno na 0, díky čemuž bude stín spíše ostrý než rozmazaný.<растяжение>Kladná hodnota stín roztahuje, záporná naopak stlačuje. Pokud tento parametr není zadán, výchozí hodnota je 0, což způsobí, že stín bude mít stejnou velikost jako prvek.<цвет>Barva stínu v jakémkoli dostupném formátu CSS, výchozí stín je černý.
Je možné zadat několik stínů a jejich parametry oddělit čárkou. Bere se v úvahu následující pořadí: první stín v seznamu je umístěn úplně nahoře, poslední v seznamu je úplně dole.
Příklad
Výsledek příkladu je na Obr. 1.
Rýže. 1. Typ stínu
Objektový model
Objekt.style.boxShadow
Poznámka
Safari před verzí 5.1, Chrome před verzí 10.0, Android před verzí 4.0 podporují vlastnost -webkit-box-shadow.
Firefox před verzí 4.0 podporuje vlastnost -moz-box-shadow.
Internet Explorer starší než verze 9.0 nepodporuje vlastnost box-shadow, místo toho můžete použít vlastnost filter:
Filtr: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Zde: offX - horizontální posunutí stínu; offY — vertikální posun stínu; barva — barva stínu.
Použití filtru vrženého stínu vytváří jasný, ostrý stín, takže můžete použít stínový filtr pro efekt rozostření.
Filtr: progid:DXImageTransform.Microsoft.shadow(směr=120, barva=#000000, síla=10);
Zde: direction — úhel směru stínu od 0 do 360°; barva — barva stínu; síla — posun stínu v pixelech.
Specifikace
Každá specifikace prochází několika fázemi schvalování.
- Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
- Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
- Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
- Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
- Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
- Koncept ( Návrh specifikace) - první verze návrhu normy.
