Download
gweb2 n.
Skip this Video
Loading SlideShow in 5 Seconds..
GWEB2 PowerPoint Presentation

GWEB2

110 Views Download Presentation
Download Presentation

GWEB2

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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+