2. CSS3
2.4 Nové prvky CSS3
CSS3 specifikace přináší spoustu nových možností, byly přidány nové selektory, pseudotřídy a vlastnosti. Tato práce se soustřeďuje především na nové vlastnosti, které usnadňují tvorbu grafiky na webových stránkách a to bez použití grafických editorů. Patří sem border-radius, text-shadow, barvy, gradienty, transformace a další.
28 Podmíněné komentáře v Internet Exploreru. RŮŽIČKA, Pavel. Interval [online]. 2002 [cit. 2014-03-17].
Dostupné z: http://interval.cz/clanky/podminene-komentare-v-internet-exploreru/
Rámečky Border-radius
Rámečky jsou nedílnou součástí webových stránek. Weboví vývojáři umí tvořit, boxy které mají zakulacené rohy, ty se ovšem musí tvořit složitě pomocí obrázků. S příchodem CSS3 se staly pravděpodobně nejznámější a zatím vývojáři nejvyužívanější novinou zaoblené rohy. Slouží k tomu vlastnost: #box1{… border-radius: 15px}. Takovýto zápis zaoblí každý roh vybraného boxu o 15px. Další forma zápisu je: border-radius: 0 15px 15px 0, kde první číslo značí levý horní roh boxu, druhé pravý horní roh, třetí pravý dolní roh a čtvrté číslo levý dolní roh boxu. Zápis může být i rozepsán obdobně jako například u známého prvku margin nebo padding:
#box2{…
border-top-left-radius: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;}
Méně známou formou zápisu ovšem je: border-radius: 1em 2em, kde první číslo znázorňuje levý horní a pravý dolní roh a druhé číslo pravý horní a levý dolní roh boxu.
Zajímavostí je, že každý roh boxu může mí dokonce dva různé poloměry:
#box3{…
border-top-left-radius: 20px 10px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 60px 30px;
border-bottom-left-radius: 20px 30px;}
Obr. 6: Borders: zakulacené rohy – box1, box2, box3 Zdroj: vlastní
Jak je vidět, nové vlastnosti CSS3 se dají zapisovat několika způsoby, které jsou obdobné.
Proto bude u dalších prvků znázorňován hlavně nejčastější typ zápisu.
Box-shadow
Další vlastnost, která je už dnes mezi vývojáři oblíbená je box-shadow. Za daným rámečkem vytvoří jeden nebo dokonce více stínů různých barev. Je dán parametry:
box-shadow:inset x y radius tloušťka barva. Inset je nepovinný parametr, buď se zapíše a tím vytvoří stín uvnitř boxu nebo se nezapíše a stín bude za boxem. X určuje horizontální délku, y vertikální výšku, radius udává poloměr rozmazání stínu a barva podbarvení stínu. Vlastnost umožňuje zápis další vrstvy stínu a to jednoduchým připsáním za definici prvního stínu: box-shadow: -5px 5px 15px #002E58, 5px -5px 15px
#FF1717;
Obr. 7: Box-shadow - několikanásobný stín Zdroj: vlastní
Border-image
Border-image umožní boxu přidat rámeček z obrázku. Tato vlastnost se může velice hodit při tvorbě zajímavé galerie, kde border-image vytvoří daným obrázkům zajímavé rámy jako v pravé galerii. Před příchodem CSS3 musely být rámečky ručně přidávány k danému obrázku pomocí elementů div, nebo mohl být použit vhodný JavaScript. Syntaxe je následující: border-image: source slice width outset repeat.29 Source určuje zdroj obrázku, ze kterého se budou hrany tvořit jeho rozřezáním. Parametr slice pomyslně umístí čtyři přímky, které rozřežou zdrojový obrázek. Width určuje šířku rámečku, outset o kolik bude rámeček posunut oproti původní pozici ven z boxu a repeated určí, zda se rozstříhaný obrázek bude opakovat: border-image:url(border.png) 30 30 30 round
29MILLS, Chris. Practical CSS3: Develop and Design. CA: Peachpit Press, 2013. ISBN 978-0321823724.
nebo se natáhne na šířku boxu: border-image:url(border.png) 30 30 30 stretch. Výsledek je zobrazen na následujícím obrázku.
Obr. 8: Border-image - zdrojový obrázek, rám s opakováním výstřižku a rám s natažením výstřižku Zdroj: vlastní
Podpora prvků v internetových prohlížečích
Většina internetových prohlížečů podporuje všechny výše zmíněné vlastnosti. Výjimkou je border-image u prohlížeče Internet Explorer. Alternativním řešením je například vytvoření stylování speciálně pro IE, pomocí podmíněných komentářů, kde se místo border-image nastyluje ohraničení obrázků pomocí základní vlastnosti border. Border-radius a box-shadow nejsou také podporovány staršími verzemi IE. Řešením je nastylování boxu do tří divů, z nichž první a poslední budou obrázky se zaoblenými rohy a prostřední div bude klasický box. Toto řešení ovšem prodlužuje dobu tvorby stránek a následně i jejich načítání. Otázkou tedy je, zda je nutné, aby na daných stránkách byly zaoblené rohy a stíny i ve starších prohlížečích nebo ne.
Tab. 8: Podpora border-radius, box-shadow a border-image v internetových prohlížečích CSS3 vlastnosti IE (9, 10)
()Explorer
Firefox Chrome Safari Opera
border-radius A A A A A
box-shadow A A A A A
border-image N A A A A
Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2014 [cit. 2013-02-27].
Barvy, průhlednost
CSS3 colors dosáhly statusu „Recommendation“. To znamená, že patří mezi nejstabilnější z modulů a je doporučováno je používat. Barvy jsou využívány pro stylování pozadí boxů nebo celé stránky, pro stylování textu, ohraničení a nyní i pro obarvení stínů. Z minulosti je znám zápis: rgb(85,85,85), kde se barva míchá pomocí tří základních barev na stupnici od 0 do 255 nebo procentuálně - 0% do 100%. První číslo označuje červenou následováno zelenou a modrou barvou. Dále se může používat jednoduché slovní označení barvy v angličtině např.: color:black a v neposlední řadě hexadecimální označení základních barev: #000000.
RGBA
Rgba model rozšiřuje rgb o kanál alfa, tedy o průhlednost. Průhlednost může nabývat hodnot od 0 do 1, kde při hodnotě 0 bude barva zcela průhledná a při hodnotě 1 nebude průhledná vůbec.
Obr. 9: RGBA - ukázka různých stupní průhlednosti Zdroj: vlastní
Rgba barvu je vhodné použít například v případě, kdy je pozadí boxu deklarováno i pomocí obrázkové textury, kterou chce designér zachovat, ale současně ji chce překrýt poloprůhlednou barvou:
background: rgba(0,204,0,0.5) url(textura.png)
HSLA
Hsl je další způsob zápisu barvy. Od rgb se liší tím, že se nemíchá barva pomocí základních barev, ale pomocí vlastností hue-saturation-lightness tedy odstínem-sytostí-světlostí. Zapisuje se následovně: hsl(200, 100%, 50%) První hodnota může být
určuje sytost barvy. Pokud je na 100%, barva je nejsytější, pokud je na 0%, barva je šedivá. Poslední hodnota určuje světlost. Na 50% je výchozí světlost, na 100% bude přesvětlená a na 0% bude příliš tmavá. Tato deklarace vznikla proto, že je pro vývojáře intuitivnější a jednodušší namíchat barvu pomocí hsl než pomocí rgb, kde se musí většinou měnit všechny složky barvy.30 Hsla zápis obdobně jako u rgba přidává k barvě průhlednost a může nabývat hodnot mezi 0 a 1, tedy mezi úplnou průhledností a neprůhledností.
background: hsla(120,100%,50%,0.5)
Opacity
Průhlednost se nemusí nastavovat pouze s barvami ale i u celého prvku pomocí opacity.
Nabývá hodnot mezi 0 a 1, kde 0 je zcela průhledný prvek a 1 je prvek neprůhledný.
Průhlednost se nastaví na prvku a jeho dceřiných částech.
div{opacity:0.5;} řádek po řádku, nastaví barvu pozadí nejprve na první deklarovanou barvu a poté, pokud bude rozumět deklaraci rgba, nastaví barvu na tu. U Internet Exploreru 8 a nižších verzí lze použít filtry.
A pro opacity:
filter: alpha(opacity=50);
Tab. 9: Podpora RGBA a HSLA v internetových prohlížečích CSS3 vlastnosti IE (9, 10)
()Explorer
Firefox Chrome Safari Opera
RGBA A A A A A
HSLA A A A A A
opacity A A A A A
Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2014 [cit. 2013-02-27]. Dostupné z: http://fmbip.com/litmus
Gradienty
Gradienty dokáží zobrazit přechod mezi několika barvami. Většinou se používají pro stylování pozadí nebo nějakého boxu. V minulosti bylo jedinou alternativou použití obrázků, které jsou datově náročné a hlavně statické. Pomocí gradientů se dají vytvářet různé vzory, které se dají dále kombinovat. Přechody se dělí na lineární a radiální.
Linear-gradient
Lineární gradienty jsou rovné přechody. Směr osy gradientu označují buď klíčová slova to bottom right, to right anebo úhly 45deg. Kde úhel 0 vede gradient zezdola nahoru, úhel 90 zleva doprava, 180 zezhora dolů apod. Dále je možné určit zarážky barev. Ty mohou být zadány v pixelech, procentech nebo relativních jednotkách.31 Zarážky určí, v jakém místě vznikne přechod. Syntaxe lineárního gradientu: background: linear-gradient(180deg, yellow, orange 80%) Barvy mohou být zadány pomocí názvů, rgba a dalších, jak bylo vysvětleno v kapitole výše.
Radial-gradient
Radiální gradienty jsou přechody šířené od středu ven. Syntaxe zápisu je následující:
background: radial-gradient(yellow, orange 80%)Výchozím tvarem je kruh
31MAKZAN a Jakub ZEMÁNEK. Programujeme hry v HTML5. 1. vyd. Brno: Computer Press, 2012. ISBN 978-80-251-3731-4.
(circle), který může být změněn na elipsu (ellipse). Elipsa je určena dvěma poloměry:
background: repeating-radial-gradient(ellipse 70px 40px, red, orange 20px, red 40px) Radiální gradient je také možné pozicovat pomocí klíčových slov:
closest-side – přechod bude končit u nejbližší strany elementu
farthest-side – přechod bude končit u nejvzdálenější strany elementu
closest-corner – přechod bude končit u nejbližšího rohu elementu
farthest-corner – přechod bude končit u nejvzdálenějšího rohu elementu32
background: repeating-radial-gradient(circle closest-side at 20px 30px, red, orange 20px, red 40px)
Repeating-linear-gradient, repeating-radial-gradient
Gradienty se mohou také opakovat pomocí syntaxe: repeating-linear-gradient (red, orange 20px, red 40px) a repeating-radial-gradient (red, orange 20px, red 40px)
Obr. 10: Ukázka gradientů - linear, radial, repeating-linear, repeating-radial a gradient s closest-side
Zdroj: vlastní
32HOGAN, Brian P. a Jakub URBAN. HTML5 a CSS3 : výukový kurz webového vývojáře. Vyd. 1. Brno:
Computer Press, 2011. ISBN 978-80-251-3576-1.
Gradienty je v praxi možné využít na vybarvení různých elementů nebo například pro tvorbu tlačítek. Je dokonce možné gradienty kombinovat tak, že vytvoří textury připomínající obrázky.
Obr. 11: Ukázka použití více gradientů pro tvorbu textury připomínající papír
Zdroj: Demo: Gradient Patterns. JOHNSTON, Jason. CSS3 Pie [online]. 2011 [cit. 2014-03-03]. Dostupné z:
http://css3pie.com/demos/gradient-patterns/
Podpora prvků v internetových prohlížečích
Přechody jsou podporovány moderními prohlížeči. U starších verzí je možné místo gradientu využít obrázek nebo filtry u Internet Exploreru. Je však potřeba dát pozor na to, že filtry zvládají pouze lineární přechody se dvěma barvami.
Tab. 10: Podpora gradientů v internetových prohlížečích CSS3 vlastnosti IE (10)
()Explorer
Firefox Chrome Safari Opera
gradients A A A A A
Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2014 [cit. 2013-02-27]. Dostupné z: http://fmbip.com/litmus
Nástroje
Přechody mohou být silným pomocníkem při webdesignu. Jejich tvorba ovšem není jednoduchá, proto existuje spoustu online aplikací, které gradient vygenerují za designéra
pomocí pár kliknutí. Jedním z takovýchto pomůcek je například Ultimate CSS Gradient Generator od ColorZilly.33
Pozadí
CSS3 přineslo i nové vlastnosti u obrázků na pozadí elementu. Ten nyní může obsahovat jeden i více obrázků z různých zdrojů. Zápis pouze stačí rozšířit o další obrázky oddělené čárkou:
background: url(pic1.jpg) top left repeat, url(pic2.jpg)top right no-repeat, url(pic3.jpg) bottom right no-repeat;
background-size:15% 15%;
Pozicování obrázku a další jeho atributy zůstávají stejné jako v předchozích specifikacích.
Atribut top left tedy znamená, že první obrázek bude v levém horním rohu. Druhý obrázek bude v pravém horním rohu a oba budou zobrazeny pouze jednou díky atributu no-repeat.
Background-size určuje šířku a výšku obrázku, která může být udána v procentech, pixelech nebo v relativních jednotkách. Vícenásobné pozadí je možné použít například v případě, kdy je potřeba aby každý roh elementu obsahoval jiný obrázek. Nebo je možné ho využít v hlavičce stránky, která většinou obsahuje logo, nadpis a další obrázky. Může se využít i gradientů tak, že na pozadí elementu bude obrázek, který dále bude překryt přechodem. Možností využití je veliké.
Obr. 12: Vícenásobné pozadí
Zdroj: CSS3 Multiple Backgrounds. MICHÁLEK, Martin. Vzhůru dolů [online]. 2014 [cit. 2014-03-04]. Dostupné z: http://www.vzhurudolu.cz/prirucka/css3-multiple-backgrounds
33 Ultimate CSS Gradient Generator. ColorZilla [online]. 2014 [cit. 2014-03-03]. Dostupné z:
http://www.colorzilla.com/gradient-editor/
Podpora prvků v internetových prohlížečích
Moderní internetové prohlížeče mají vlastnost multiple background implementovánu. Pro starší prohlížeče je potřeba vytvořit alternativu tzn. před samotným zápisem mnohonásobné pozadí definovat pozadí pouze s jedním obrázkem nebo barvou, které starší prohlížeče pochopí. Dalším řešením je vytvoření více elementů div, které budou mít na pozadí každý jeden obrázek.
Tab. 11: Podpora mnohonásobného pozadí v internetových prohlížečích CSS3 vlastnosti IE (9, 10)
()Explorer
Firefox Chrome Safari Opera
Multiple Backgrounds A A A A A
Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2014 [cit. 2013-02-27]. Dostupné z: http://fmbip.com/litmus
W3C plánuje v budoucnu vlastnosti background dále vylepšit. Mezi očekávané vlastnosti patří: automatické otáčení, zrcadlení nebo pozicování pozadí na základě toho, kde se nachází text v boxu a další zajímavé funkce.34 Záleží opět na designérech a uživatelích, zda se tyto funkce budou využívat a jestli se jednou dostanou ve specifikaci na status Recommendation.
Textové efekty, fonty Text-shadow
Jednou z lépe známých nových funkcí CSS3 je text-shadow. Přidává jeden nebo více stínů za textem. Pokud chtěli vývojáři v minulosti vytvořit zajímavé logo nebo nadpis stránky, bylo za potřebí grafického editoru. Nyní je to možné i bez něj. Deklarace je následující:
text-shadow: x y radius barva35. X určuje horizontální délku, y vertikální výšku, radius udává poloměr rozmazání stínu a barva zabarvení stínu. Stejně jako u box-shadow
34 CSS SPECIFICATIONS. W3C [online]. 2014 [cit. 2014-02-27]. Dostupné z:
http://www.w3.org/Style/CSS/specs
35DOMES, Martin. 333 tipů a triků pro CSS. 2., aktualiz. vyd. Brno: Computer Press, 2011. ISBN 978-80-251-3366-8.
může text-shadow určovat více stínů: text-shadow: 5px 5px 5px black, 10px 10px 10px orange.
Obr. 13: Text-shadow - text s vícenásobným stínem Zdroj: vlastní
Font face
Fonty, které mohli designeři používat při tvorbě webových stránek, byly doposud omezené na ty, které mají uživatelé nainstalované ve svých systémech. Během let bylo vyvinuto i několik náhradních řešení jako použití obrázků nebo JavaScriptu. Pravidlo @font-face umožňuje propojení stránky s fonty na serveru. Na stránce je tedy možné použít jakékoliv písmo, které je na server nahráno. Fonty musí být nahrány v různých formátech, aby se zajistila podpora ve všech prohlížečích. Mezi známé formáty patří: EOT (Embedded OpenType), WOFF (Web Open Font Format), TTF (TrueType), SVG, a další. EOT je formát, který podporuje Internet Explorer a i jeho starší verze, TTF podporují všechny prohlížeče a SVG je formát, který byl dříve jako jediný podporován v iOS. Pokud je písmo nahráno na server, zařadí se do font-family:
@font-face {
font-family: 'Clicker Script';
src: url('./fonty/Clicker_Script.eot?') format('eot'), url('./fonty/Clicker_Script.woff') format('woff'), url('./fonty/Clicker_Script.ttf') format('truetype'), url('./fonty/Clicker_Script.svg') format('svg');}
Font-family v tomto případě deklaruje název fontu, src určuje zdroj a format popisuje druh formátu. Posledním krokem je použití fontu u elementu zavoláním pomocí font-family. 36
body{
font-family: 'Clicker Script';}
36 MILLS, Chris. Practical CSS3: Develop and Design. CA: Peachpit Press, 2013. ISBN 978-0321823724
Nástroje
Fonty je možné stáhnout na různých stránkách například na ceskefonty.cz nebo fonts.com.
Zde se nachází spousta fontů, které jsou k využití zdarma. Pro převod těchto fontů do různých formátů je dále možné využít online službu Font2web.com. Dalším zjednodušením je stránka Googlefonts.com, ze které stačí zkopírovat odkaz vybraného písma. Pod tímto odkazem jsou už všechny formáty písma a není tedy nutné nic dále konvertovat.
Podpora prvků v internetových prohlížečích
Text-shadow je podporováno ve všech moderních prohlížečích. Pro starší IE je možné použít filtry:
text-shadow: 1px 1px 1px #555;
filter: dropshadow(color=#555555,offX=1,offY=1);
Font-face je podporováno i ve starších prohlížečích. Je třeba vždy ale zkontrolovat, jestli se nahrané písmo správně zobrazuje.
Tab. 12: Podpora font face a text-shadow v internetových prohlížečích
CSS3 vlastnosti IE Firefox Chrome Safari Opera
font face A (IE 6-10) A A A A
text-shadow A (IE 10) A A A A
Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2014 [cit. 2013-02-27]. Dostupné z: http://fmbip.com/litmus
Media queries
Media queries je způsob, kterým je možné pomocí CSS zjistit, jaké schopnosti zobrazování má zařízení uživatele. Na základě toho je možné zobrazit stylování stránky vhodné pro toto zařízení. Lidé totiž nepřistupují k webovým stránkám pouze z desktopového počítače nebo notebooků, ale také z mobilních telefonů, tabletů, čteček knih a dalších. Jsou dva možné způsoby zápisu. První způsob zápisu se vloží přímo do HTML kódu, každé zařízení, tak bude mít svůj vlastní CSS soubor:
<link rel="stylesheet" media="(max-width: 800px)" href="example.css">
Nebo je možné kód vložit do CSS souboru:
@media (max-width: 600px) {
/*kód, který se aplikuje, pouze pokud se splní podmínky*/}
Dotaz na média se skládá z logických operátorů a vlastností médií. Následující tabulka vysvětluje jejich funkce.
Tab. 13: Logické operátory, vlastnosti médií a jejich funkce Operátory a
vlastnosti Funkce
and řetězení podmínek Př.: media="(min-width: 700px) and (orientation:
landscape)"
„čárka“ řetězení zařízení Př.: media="screen, tv, projection"
not negace výrazu
only zabraňuje starším prohlížečům, které nepodporují media queries s vlastnostmi médií v použití stylování
width, height šířka a výška určená k zobrazení webové stránky device-height,
device-width šířka a výška zobrazovacího zařízení, ne stránky color počet bitů, které definují barvy
color-index počet možností barev, které může zařízení zobrazit aspect-ratio poměr mezi výškou a šířkou stránky
device-aspect-ratio poměr mezi výškou a šířkou zařízení grid
zda zařízení používá obrazovku (0) nebo terminál – starší mobilní telefony (1) monochrome zda zařízení je monochromní – používá pouze šedé odstíny
orientation zda je obrazovka zařízení orientována na šířku nebo výšku resolution jaké je rozlišení obrazovky dpi/pcmi
scan způsob vykreslování obrazovky progressive/interlace Př.: u TV
Zdroj: vlastní zpracování podle CSS media queries. MOZILLA DEVELOPER NETWORK [online]. 2014 [cit. 2014-03-05]. Dostupné z: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Spojením logických operátorů a vlastností médií je tedy možné tvořit dotazy. Následující dotaz aplikuje CSS soubor style1.css tiskárnám, které mají obrazovku širší než 8,5 palce.
<link rel="stylesheet" media="print and (min-width: 8.5in)"
href="tiskarny.css">
Tento dotaz aplikuje CSS soubor b_style.css u zařízeních s obrazovkami širšími než 1100px.
<link rel="stylesheet" href="b_style.css" media="screen and (min-width:
1100px)">
Existuje tedy spoustu možností, jak může webdesigner posílat dotazy na media a podle toho vytvářet stylovací soubory pro různá zařízení. Stránka, pak může na každém zařízení vypadat trochu jinak. U mobilních zařízení mohou být odstraněny některé obrázky, aby načítání stránky, nebylo zdlouhavé. Rozměry stránky se mohou nastavit tak, aby se automaticky přizpůsobovaly menším obrazovkám. Text, který se zobrazuje malým písmem, pokud si prohlížíme stránku stylovanou pouze pro počítače, může být pomocí verzi prohlížeče. Vhodným řešením je tvořit stránku, tak aby s ní starší prohlížeče neměly problém a pro přenosná zařízení používat zmíněná media queries.
Tab. 14: Podpora media queries v internetových prohlížečích CSS3 vlastnosti IE (9, 10)
()Explorer
Firefox Chrome Safari Opera
media queries A A A A A
Zdroj: vlastní zpracování podle HTML5 & CSS3 Support. FindmebyIP [online]. 2014 [cit. 2013-02-27]. Dostupné z: http://fmbip.com/litmus
Transformation, transition a animation Transformation
Transformace umožňuje elementům se přetvořit do 2D nebo 3D prostoru, elementy mohou změnit tvar velikost nebo pozici. Syntaxe pro transformaci je následující: transform:
Transformace umožňuje elementům se přetvořit do 2D nebo 3D prostoru, elementy mohou změnit tvar velikost nebo pozici. Syntaxe pro transformaci je následující: transform: