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.
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
ČLÁNKY DO MAILU