1 / 8

GWEB2

GWEB2. Mgr. Vlastislav Kučera 3. přednáška. Obsah přednášky. CSS3 b arvy b order-radius b ox- shadow t ext- shadow. 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á

shad-adams
Télécharger la présentation

GWEB2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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+

More Related