Tabulka stín css. Vnitřní stíny v CSS
Vlastnost CSS box-shadow přidává k prvku jeden nebo více stínů. Chcete-li zadat více stínů, musíte přidat další hodnoty stínů oddělené čárkami.
Podpora prohlížeče
| 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 |
Syntaxe CSS:
box-shadow: "none| inset h-shadow v-shadow blur-radius spread-radius color | initial | inherit";Syntaxe JavaScriptu:
Object.style.boxShadow = "10 pixelů 5 pixelů 5 pixelů červená"
Hodnoty majetku
| 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 vložené (hodnota), stín spadne do prvku a vytvoří efekt odsazení. 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á. |
| Nastaví vlastnost na výchozí hodnotu. | |
| Označuje, že hodnota je zděděna z nadřazeného prvku. |
CSS verze
CSS3Zděděno
Žádný.Animovatelné
Ano.Příklad použití
Vlastnost box-shadow přidá k prvku jeden nebo více stínů. Stín je kopie prvku posunutá o zadanou vzdálenost. Stíny mohou být vnější nebo vnitřní, rozmazané nebo ploché a mohou sledovat obrysy bloků se zaoblenými rohy. Pomocí klíčového slova inset jsou uvnitř prvku vytvořeny stíny, díky nimž je prvek vizuálně objemný nebo depresivní.
Jak vytvořit stín boxu pomocí vlastnosti box-shadow
Podpora prohlížeče
TJ: 9.0
Okraj: 12.0
Firefox: 4,0, 3,5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Prohlížeč Android: 4.0, 2.1 -webkit-
1. Syntaxe vlastnosti box-shadow
Každý stín má jeden až pět parametrů: horizontální posun, vertikální posun, poloměr rozostření (volitelně), poloměr rozprostření (volitelně) a barvu stínu. Stíny neovlivňují rozvržení a mohou překrývat sousední prvky nebo jejich stíny. Nemovitost se nedědí.
Rýže. 1. Syntaxe vlastnosti box-shadow | Hodnoty: | |
| x-posun | Požadovaná hodnota. Horizontální odsazení stínu vzhledem k bloku. Může nabývat kladných i záporných hodnot, kladná posouvá stín vpravo od bloku, záporná doleva. |
| y-posun | Požadovaná hodnota. Vertikální odsazení stínu vzhledem k bloku. Může nabývat kladných i záporných hodnot, kladné posouvá stín dolů, záporné posouvá stín nahoru. |
| rozmazat | Volitelná hodnota. Určuje poloměr rozostření stínu. Čím větší je poloměr, tím více je stín rozmazaný. Lze použít pouze kladné hodnoty. |
| protahování | Volitelné, rozšíří stín a zahustí pevnou část mezi rozmazanými okraji. Přijímá kladné i záporné hodnoty uvedené v jednotkách délky – px atd. |
| barva | Volitelná hodnota. Ve výchozím nastavení je stín černý. Pro nastavení hodnoty můžete použít následující formáty záznamu barev: #RRGGBB , rgb(červená, zelená, modrá) , rgba(červená, zelená, modrá, alfa) . Pro Safari musí být specifikována barva stínu. |
| vložka | Vytvoří stín uvnitř bloku. |
| žádný | Výchozí hodnota znamená žádný stín. |
| počáteční | Nastaví hodnotu vlastnosti na výchozí hodnotu. |
| zdědit | Zdědí hodnotu vlastnosti z nadřazeného prvku. |
2. Příklady blokových stínů
2.1. Vnitřní stín
.example-shadow-1 ( background: #e6e3df; text-align: center; ) .example-shadow-1 span ( margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1);
2.2. Plochý stín na jedné straně
byt
byt
.example-shadow-2 ( pozadí: béžová; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; margin : 20px; barva: bílá; pozadí: #55acee; 5pxS 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 vložené (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 */Přejděme k procvičování a začněme jednoduchým příkladem, ve kterém k prvkům přidáme jeden stín:
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 (15em a 10em), přidané okraje na všech stranách (2em) a nastavit bloky jako blokové, aby bylo možné je 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 vás okamžitě upozornit na skutečnost, že můžete přímo zadat stín pro prvek HTML 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á). V deklaraci jsme navíc zadali klíčové slovo inset, které 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-2019 Denis Bolshakov, můžete posílat komentáře a návrhy na web na adresu [email protected]
Stejné jako aktualizace 3, ale s moderními pravidly css (=méně), takže není vyžadováno speciální umístění na pseudoprvku.
#box ( background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); ) .box-shadow:after ( obsah:""; z-index:-1; 0px 8px 2px #000000;
AKTUALIZACE 3
#box ( background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; ) .box- shadow:after ( content: ""; šířka: 150px; výška: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000 box-shadow: 0px 0px 8px 2px #000000;
AKTUALIZACE 2
Zjevně to můžete udělat pouze s volitelnou možností CSS box tag, jak všichni ostatní právě uvedli. Zde je ukázka:
Webkit-box-shadow: 0 4px 4px -2px #000000;
-moz-box-shadow: 0 4px 4px -2px #000000;
box-shadow: 0 4px 4px -2px #000000;
To by bylo nejlepší řešení. Dodatečný parametr, který je přidán, je popsán takto:
Čtvrtá délka je vzdálenost šíření. Kladné hodnoty způsobí, že se tvar stínu rozšíří ve směru podél zadaného poloměru. Záporné hodnoty způsobují, že tvar stínu souhlasí.
#wrapper ( šířka: 84px; pozice: relativní; ) #element ( barva pozadí: #3D668F; výška: 54px; šířka: 100 %; pozice: relativní; z-index: 10; ) #shadow ( barva pozadí: # 3D668F; výška okraje: -40px; z-index: 0px 2px 4px #000000;
Původní odpověď
Ano, můžete to udělat se stejnou syntaxí, kterou jste zadali. První hodnota řídí horizontální umístění a druhá hodnota řídí vertikální umístění. Stačí tedy nastavit první hodnotu na 0px a druhou na jakýkoli offset, který chcete provést následovně.
Stíny v CSS lze implementovat poměrně rychle a snadno, ať už jde o stín rámečku nebo stín textu. Ale je opravdu tak snadné implementovat vnitřní stín? Dokážete vytvořit stín vložené krabice? A co stejný úkol při použití textu?
Dnes vám chceme říci o velmi jednoduchém způsobu implementace vnitřního stínu, který zahrnuje jen několik řádků kódu. Řekneme vám o stínech rámečku a textu a o tom, jak je můžete změnit, abyste vytvořili vložený stín.
Líbí se vám tento článek? Nezapomeňte se přihlásit k odběru našeho.
Stínová syntaxe
Než se pustíme do embedded shadows, podívejme se na základní syntaxi pro vytváření dvou různých typů CSS shadows. I když jste to už dělali, osvěžme si paměť.
box-shadow
Box shadows nebo box-shadows jsou pravděpodobně jedním z nejoblíbenějších stínů v CSS. Potenciální implementace se zde velmi liší a vývojáři často používají své vlastní přístupy a aplikace. Syntaxe stínového pole jako celek je poměrně složitá a zahrnuje 6 samostatných hodnot. Začneme tím, že se podíváme na 5 nejčastějších příkladů implementace.
Jak vidíte, výše uvedený seznam je seznam hodnot pro horizontální posun, vertikální posun, poloměr rozostření, úroveň rozprostření stínu a barvu. První dvě hodnoty - horizontální a vertikální offset - jsou velmi jasné. Kladné hodnoty posunou stín doprava a dolů, zatímco záporné hodnoty posunou stín doleva a nahoru. Podívejme se na příklad obou významů:
Poslední dvě hodnoty, které jsou zodpovědné za poloměr rozostření a poloměr šíření, jsou trochu složitější. Asi se ptáte, jaký je v tom rozdíl? Abychom na to odpověděli, podívejme se nejprve na jeden, který už pravděpodobně znáte: poloměr rozostření.
Jak vidíte, pokud nepoužijeme poloměr rozostření, budeme schopni vytvořit stín s ostrými hranami, ale velká hodnota dává velmi neostré okraje. Je to jednoduché, že? Jak je to tedy s parametrem poloměru šíření? Jaký je zde rozdíl? Obrázek vysvětlí situaci lépe než tisíc slov:
Jak můžete vidět, poloměr šíření nám umožňuje zvětšit nebo zmenšit oblast stínu, aniž by to ovlivnilo úroveň jejího rozmazání. Pokud tento parametr považujeme za velikost stínu, nemůžete udělat chybu.
Pokud nepoužijete rozostření a rozprostření, tyto výchozí hodnoty zůstanou na 0. Pokud provedete malý průzkum příkladů online, všimnete si, že většina ukázkových souborů nepoužívá možnost rozprostření. Všimněte si také, že verze box-shadow se obvykle přidává s předponou –webkit, aby se předešlo problémům s různými prohlížeči.
stín textu
Nyní přesně víme, co stín boxu dělá a co to je, je čas přejít k učení syntaxe pro jiný typ stínu CSS: text-shadow. Naštěstí je zde syntaxe mnohem jednodušší než u box shadows.
Jak vidíte, většina významů je stejná, takže pokud rozumíte jednomu, pochopíte i druhý. I když zajímavostí je, že zde nebudete moci měnit poloměr stínu. Bylo by skvělé, kdybychom měli tuto příležitost, ale tady to prostě není.
Vložené stíny bloku
Nyní jsme probrali základy a nyní rozumíte syntaxi stínů CSS. Je čas naučit se vytvářet vnitřní a vsazené stíny. Abychom převedli stín na vsazený, stačí přidat slovo vsazený.
Proto jsme začali s jednoduchou syntaxí. Celkově může být fragment kódu box-shadow trochu matoucí, ale jakmile to pochopíte, bude to vypadat jednoduše.
Zde všechny hodnoty v podstatě fungují stejně, pouze stín je umístěn uvnitř bloku. Na tomto obrázku můžeme vidět, jak moc může poloměr šíření stínu ovlivnit vzhled stínu:
Všimněte si, že tentokrát jsme místo HEX hodnoty použili barvu RGBa. To je skvělé pro stíny, protože hodnota krytí umožňuje rychlé a snadné ztmavení nebo zesvětlení stínu.
Obrázky
Je docela snadné aplikovat box-shadow na prázdný div, ale co když chcete vrhnout stín na obrázek? Zní to jednoduše, ale ve skutečnosti je to docela složité. Podívejme se na kód a uvidíme výsledek, který vytvoří. Začněme obyčejným starým img tagem.
Nyní jej specifikujeme v našem CSS a přidáme box-shadow. Možná si myslíte, že by fungovalo něco takového:
obr. (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0,5);
}
To nás bohužel dovede k dalšímu výsledku. Obraz bude fungovat, ale stín bude neviditelný!
Jak tedy aplikujeme vnitřní stín na obrázek? Existuje několik způsobů implementace a všechny mají své výhody a nevýhody. Podívejme se na dva nejoblíbenější přístupy.
Prvním řešením je zabalit obrázek do prvku div, který má stejnou velikost jako obrázek, a poté na tento prvek vrhnout stín, přičemž se na obrázek také použije relativní umístění a z-index. Náš kód bude vypadat takto:
div(
výška: 200px;
šířka: 400px;
}
img(
výška: 200px;
šířka: 400px;
poloha: relativní;
z-index: -2;
}
Tento přístup funguje, ale vyžaduje další kód a spoustu dalších CSS. Případně můžete použít obrázek HTML a vložit obrázek na pozadí pomocí CSS. Pomocí tohoto přístupu se můžete ujistit, že obrázek nebude zakrývat stín a ve výchozím nastavení bude umístěn pod ním.
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);
}
Pokud tyto techniky zkombinujeme s poměrně silným šířením, můžeme dosáhnout poměrně silné vinětace obrazu pouze pomocí CSS.
Vložený stín textu
I když je implementace stínů vložených bloků složitá, je docela snadné je pochopit. Zadejte slovo inset a váš stín se stane vnitřním. Je to jednoduché.
U textových stínů je to bohužel mnohem složitější. Vložená hodnota není kompatibilní se stínem textu, takže zde nebude nic fungovat:
Místo toho je musíme trochu zkombinovat. Implementace je neobvyklá, proto práci rozdělíme do dvou etap, abychom lépe pochopili, co se zde děje. Nejprve musíme zadat nadpis h1 a použít následující styly:
H1 (
barva pozadí: #565656;
barva: transparentní;
}
A teď už jsme ve zvláštní situaci. Nastavíme barvu pozadí na tmavou, stín textu na bílou a barvu výplně na průhlednou. Pokud se vám to zdá divné, podívejte se na výsledek:
Tohle není vůbec to, co jsme potřebovali. Zajímavostí je, že jsme zase úplně na začátku. Tajnou složkou, díky které vše funguje, je parametr background-clip nastavený na text.
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;
}
Nastavením parametru background-clip na text můžeme efektivně vyjádřit vše, co se děje na pozadí (obrázky, gradace, barvy atd.) podél obrysu textu. Když to uděláme pomocí kódu, který jsme již vytvořili, výsledek je následující:
Jak vidíte, máme docela pěkný efekt. Rozmazané okraje byly vyříznuty a nyní působí jako vložený stín. Mezitím nám stín textu dává možnost nastavit úroveň světlosti pozadí a také vytváří mírně zvýšený efekt na vnější straně textu. Pokud změníme hodnotu stínu z 0,5 na 0,3, text ztmavne.
Podpora prohlížeče
Pokud chcete používat přístupy s různými podivnými parametry, jako je klip na pozadí, musíte vědět, kde to bude fungovat a kde ne. Jako vždy, pokud jde o podporu prohlížeče, se obracíme na .
Na základě této tabulky parametr background-clip funguje ve většině prohlížečů docela dobře. Dokonce i IE9 to podporuje! Můžete mít problémy s některými zastaralými prohlížeči.
Závěr
Nyní víte, co byste měli vědět o vložených stínech v CSS. Toto je velmi zajímavá oblast k prozkoumání. Všechny přístupy pravděpodobně nebudou intuitivní a jejich zvládnutí bude nějakou dobu trvat. Řekněte nám, co si myslíte o navrhovaných řešeních a které z nich používáte?
