GWEB2 MGR. VLASTISLAV KUČERA 3. PŘEDNÁŠKA. Obsah přednášky  CSS3  barvy  border-radius  box-shadow  text-shadow.

Prezentace na téma: "GWEB2 MGR. VLASTISLAV KUČERA 3. PŘEDNÁŠKA. Obsah přednášky  CSS3  barvy  border-radius  box-shadow  text-shadow."— Transkript prezentace:

1 GWEB2 MGR. VLASTISLAV KUČERA 3. PŘEDNÁŠKA

2 Obsah přednášky  CSS3  barvy  border-radius  box-shadow  text-shadow

3 Barvy  stejné jako v CSS2 + RGBA, HSL, HSLA  RGBA  RGB + úroveň neprůhlednosti  úroveň neprůhlednosti: 0 – 1  0 = 0% - plně průhledná  1 = 100% - neprůhledná  jenom pomocí zápisu v desítkové soustavě: rgba(r,g,b,a)  podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

4 Barvy – HSL, HSLA  nový způsob zápisu barvy  H – hue – odstín  hodnoty: 0 – 359 (0 – červená, 60 – žlutá, 120 – zelená, 180 – azurová, 240 modrá, 300 - fialová)  S – saturation – sytost  hodnoty: v procentech, 100% - plná sytost, 0% - žádná sytost  L – lightness – světelnost  hodnoty: v procentech, 100% - bílá, 50% - aktuální odstín, 0% - černá  HSLA = HSL + neprůhlednost – stejné jako u RGBA  podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

5 Neprůhlednost - opacity  hodnoty – stejné jako RGBA – 0 – 1  podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+  opacity je dědičná vlastnost

6 border-radius  definování zaoblených rohů  definice podobná jako u margin  border-radius: 10px – poloměr zakulacení bude ve všech rozích stejné  border-radius: 10px 5px 8px 7px  10px – levý horní roh, 5px – pravý horní roh, 8px – pravý dolní roh, 7px – levý dolní roh  dílčí vlastnosti:  border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left- radius  nejen kulaté, ale i elipsovité rohy  border-radius: 20px / 10px  podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

7 box-shadow  přidání vrženého stínu  definujeme vodorovný, svislý posun, barvu, rozmazání a offset  př: box-shadow: 2px 5px 0 0 rgb(0,0,0)  2px: vodorovný posun: kladná hodnota – posun doprava, záporná – doleva  5px: svislý posun: kladná hodnota – posun dolů, záporná – nahoru  0 – volitelná hodnota – rozmazání, jen kladná hodnota  0 – volitelná hodnota – dosah stínu: kladná hodnota – roztažení stínu, záporná – smrštění / zkrácení,  barva  lze i vnitřní stíny: na začátku definice hodnot: inset  podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

8 text-shadow  stínovaný text  stíny u jednotlivých znaků  můžeme přidat jeden nebo několik stínů  podobně jako u box-shadow  až na roztahování/zkracování stínu, vnitřní stín  př: text-shadow: 2px 4px 3px rgba(50,50,50,0.6);  2px – pod textem, 4px – vlevo od textu, 3px – rozmazání, barva stínu  více stínu u textu:  text-shadow: 2px 4px 3px rgba (50,50,50,0.6), 4px 2px 3px rgba(50,50,50,0.6);  podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 10+, Opera 11+