Hlavní navigace

Novinky v CSS3: box shadow aneb stíny elementů

Martin Smola 26. 9. 2012

Přibývající množství různých velikostí rozlišení displejů znamená pro programátora a webdesignera mnoho starostí a práce navíc. Současná živá specifikace HTML5 se začíná o tento problém zajímat a zahrnuje vlastnosti css, které jsou schopny toto řešit. Jedna z těchto vlastností je box-shadow.

Vítám vás u dalšího dílu z našeho seriálu o novinkách rodiny HTML5, do které patří CSS, JS a HTML. V dnešním dílu se podíváme na vlastnost nového CSS3, která umožňuje vytvořit stín elementu. Vlastnost se nazývá Box-shadow. Díky této vlastnosti už nemusíme vytvářet obrázkové elementy stránky, abychom dosáhli efektu stínu. Stačí pouze přidat v CSS stylu vlastnost box-shadow a nastavit jí patřičné hodnoty.

Vlastnost box-shadow je možné zapisovat s následujícími hodnotami: h-shadow v-shadow blur spread color inset, neboli česky myšleno: horizontální-odsazení vertikální-odsazení rozostření roztažení barva vnitřní.

Horizontální odsazení - h-shadow

  • Horizontální odsazení znamená v podstatě polohu stínu od shora, tedy pokud nastavíme 0px, stín bude zleva i zprava vystředěný. Pokud někdo pracuje s Photoshopem, ví, jak to vypadá, pokud se nastaví odsazení stínu nula. Lze zadávat kladné i záporné hodnoty

Vertikální odsazení - v-shadow

  • Vertikální odsazení je to samé jako odsazení horizontální, pouze ve vertikálním směru. Lze zadávat kladné i záporné hodnoty.

Rozostření - blur

  • Blur neboli rozostření stínu nastavujeme v pixelech a jde o počet px, do kterých se má stín rozostřit. Nelze zadávat záporné hodnoty.

Roztažení - spread

  • Spread určuje roztažení stínu. Tato hodnota se obvykle moc nepoužívá.

Barva - color

  • Barva stínu lze zapisovat mnoha způsoby. Především pomocí klíčových slov white, black, red, blue, atd... Na JakPsatWeb.cz jsou popsány barvy, které lze zapisovat podle klíčových slov. Další možnost zápisu barev je pomocí jejich šestnáctkového kódu ve tvaru #C71585. Šestnáctkové kódy lze také opsat z grafických programů a jde asi o nejstandardnější zápis barev v CSS. Barvy lze zapisovat i pomocí rgb hodnot, tedy podle hodnoty red, green a blue. Například rgb(255,255,255). Další možnost je pomocí RGBA, tedy podle red, green, blue a alfa hodnot, přičemž poslední alfa slouží pro hodnotu transparentnosti. rgba(255,255,255,0.5) bude viditelný pouze z 50 %. Poslední možnost je zapisovat místo rgb, rgba hodnotami hsl a hsla, neboli Hue, Saturation, Lightness a Alfa.

Vnitřní/vnější - inset/outset

  • Poslední hodnota vlastnosti box-shadow rozhoduje o tom, jestli bude stín vržený nebo vnitřní. Řídíme to klíčovými slovy outset pro vnější-vržený a inset pro vnitřní stín. Při vynechání této hodnoty je defaultní outset, tedy vnější-vržený stín. Prohlížeče se ovšem zcela přesně nedržely specifikace a klíčové slovo se zapisuje jen při inset. Pokud chceme stín vně, prostě nenapíšeme nic a prohlížeč ví, že chceme outset.

S těmito jednotlivými hodnotami si člověk musí trochu pohrát, aby dosáhl přesně toho výsledku, který by si představoval. Nejlépe funguje metoda, při které používáme grafický editor. Pokud nám webdesigner dobře připraví soubor s designem webu, stačí jej při stylování otevřít, rozbalit nastavení stylu elementu a ze záložky vržený stín nebo vnitřní stín opsat všechny potřebné hodnoty do našeho CSS stylu. Je to pravděpodobně nejrychlejší metoda a bývá i velmi přesná.

Pro názornost si ukážeme pár ukázek s popisem.

box-shadow:0px 0px 5px 0px #000000;
box-shadow:5px 5px 5px 0px #000000;
box-shadow:5px 5px 5px 5px #000000;
box-shadow:0px 0px 5px 0px #000000 inset;
box-shadow:0px 0px 5px 0px rgb(0,20,255);
box-shadow:10px 20px 5px 0px rgb(0,20,255);
box-shadow:10px 20px 5px 0px rgba(0,20,255,0.3);
box-shadow:0px 0px 10px 0px rgb(255,200,255) inset;
box-shadow:0px 0px 5px 0px pink;
box-shadow:1px 1px 3px 0px black;
box-shadow:-5px -5px 5px 0px LawnGreen;
box-shadow:0px 0px 5px 5px white inset;

Podpora prohlížečů

  • Internet Explorer od verze 9 - nižší verze naprosto netuší, o jakou funkci se jedná a jak s ní zacházet
  • Mozilla Firefox od verze 4 - nižší verze zvládají s prefixem -moz-
  • Google Chrome - umí jak s prefixem -webkit-, tak bez něj
  • Safari - podporuje
Našli jste v článku chybu?

2. 10. 2012 0:07

Pepa (neregistrovaný)

Ale prosimtě. Na box shadow samozřejmě není brzo. On se svět nepo... když v IE ten stín nebude, a pokud na něm trváš, tak mám velmi dobrou zkušenost s http://css3pie.com/

27. 9. 2012 11:50

lamasutra (neregistrovaný)

Njn. IE je příklad ostatním, jak nedělat prohlížeč.
Při větším použití box-shadow s blurem, IE9 nestíhá. Musel jsem pro něj extra obrázkové stíny, anebo vypnout úplně.
Přitom to s IE9 vypadalo zprvu nadějně, ne kluci z Redmondu musí pořád házet klacky pod nohy. Další sranda je potom řešit problémy napříč verzemi a u wXP max IE8. IE je pro mně zadřená brzda a zbytečně komplikuje vývoj a používání webových standardů.

ps.: Nevíte náhodou někdo, proč nikdy nepřidali podporu průhledných png do IE6? …



Podnikatel.cz: Udávání a účtenková loterie, hloupá komedie

Udávání a účtenková loterie, hloupá komedie

Vitalia.cz: Mondelez stahuje rizikovou čokoládu Milka

Mondelez stahuje rizikovou čokoládu Milka

Root.cz: Vypadl Google a rozbilo se toho hodně

Vypadl Google a rozbilo se toho hodně

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Podnikatel.cz: Chaos u EET pokračuje. Jsou tu další návrhy

Chaos u EET pokračuje. Jsou tu další návrhy

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

Lupa.cz: Propustili je z Avastu, už po nich sahá ESET

Propustili je z Avastu, už po nich sahá ESET

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Podnikatel.cz: Babiš: E-shopy z EET možná vyjmeme

Babiš: E-shopy z EET možná vyjmeme

Lupa.cz: Teletext je „internetem hipsterů“

Teletext je „internetem hipsterů“

Podnikatel.cz: Babiše přesvědčila 89letá podnikatelka?!

Babiše přesvědčila 89letá podnikatelka?!

Root.cz: Certifikáty zadarmo jsou horší než za peníze?

Certifikáty zadarmo jsou horší než za peníze?

Vitalia.cz: Paštiky plné masa ho zatím neuživí

Paštiky plné masa ho zatím neuživí

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

DigiZone.cz: Flix TV má set-top box s HEVC

Flix TV má set-top box s HEVC

Vitalia.cz: Znáte „černý detox“? Ani to nezkoušejte

Znáte „černý detox“? Ani to nezkoušejte

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

DigiZone.cz: ČRa DVB-T2 ověřeno: Hisense a Sencor

ČRa DVB-T2 ověřeno: Hisense a Sencor