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í.

widgety

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?
Lupa.cz: Blíží se konec Wi-Fi sítí bez hesla?

Blíží se konec Wi-Fi sítí bez hesla?

Vitalia.cz: Antibakteriální mýdla nepomáhají, spíš škodí

Antibakteriální mýdla nepomáhají, spíš škodí

Vitalia.cz: Test dětských svačinek: Tyhle ne!

Test dětských svačinek: Tyhle ne!

Root.cz: Hořící telefon Samsung Note 7 zapálil auto

Hořící telefon Samsung Note 7 zapálil auto

Podnikatel.cz: Chystá se smršť legislativních novinek

Chystá se smršť legislativních novinek

Podnikatel.cz: Udělali jsme velkou chybu, napsal Čupr

Udělali jsme velkou chybu, napsal Čupr

Podnikatel.cz: Rohlik.cz testoval roboty pro rozvážku

Rohlik.cz testoval roboty pro rozvážku

DigiZone.cz: Technisat připravuje trojici DAB

Technisat připravuje trojici DAB

Vitalia.cz: 5 chyb, které děláme při skladování potravin

5 chyb, které děláme při skladování potravin

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

120na80.cz: Pálení žáhy: která jídla ne a co nás uzdraví?

Pálení žáhy: která jídla ne a co nás uzdraví?

Vitalia.cz: Vodárny varují: Ve vodě z kohoutku jsou bakterie

Vodárny varují: Ve vodě z kohoutku jsou bakterie

Lupa.cz: Co všechno je Facebook schopný cenzurovat?

Co všechno je Facebook schopný cenzurovat?

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup

Lupa.cz: Patička e-mailu závazná jako vlastnoruční podpis?

Patička e-mailu závazná jako vlastnoruční podpis?

Vitalia.cz: Tradiční čínská medicína a rakovina

Tradiční čínská medicína a rakovina

Podnikatel.cz: Nemá dluhy? Zjistíte to na poště

Nemá dluhy? Zjistíte to na poště

DigiZone.cz: Sat novinky: NASA Ultra HD (4K)

Sat novinky: NASA Ultra HD (4K)

Podnikatel.cz: Letáky? Lidi zuří, ale ony stále fungují

Letáky? Lidi zuří, ale ony stále fungují