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

GWEB2

164 Views Download Presentation
Download Presentation

GWEB2

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

  1. GWEB2 Mgr. Vlastislav Kučera 4. přednáška

  2. Obsah přednášky • vícenásobná pozadí • velikost pozadí • zobrazení pozadí • gradienty

  3. Vícenásobná pozadí • můžeme definovat více obrázků (barev) na pozadí • jednotlivé obrázky (barvy) oddělujeme čárkou • př.: • background-image: url(obrazek1.png), url(obrazek2.png) • obrazek1.png bude umístěn nad obrazek2.png • podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

  4. Vícenásobná pozadí • upravena i background-position • můžeme definovat pozice pro každý obrázek • pozici každého obrázku oddělujeme čárkou • pokud nedefinujeme – obrázky se zobrazují z levého horního rohu

  5. Background-size • měníme velikost obrázku • hodnoty: • cover – obrázek vyplní celou plochu • contain – obrázek se zobrazí celý • rozměry – vertikální horizontální • pří více obrázcích: jednotlivé definice oddělujeme čárkou • podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

  6. Background-clip • určení, kde se obrázek na pozadí vykreslí • hodnoty • border-box – obrázek se vykreslí i pod orámováním • content-box – jenom pod obsahem • padding-box –pod obsahem a výplní • podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

  7. lineární gradienty • linear-gradient • definuje se směr gradientu, barvy obsažené v gradientu • směr: • úhel, strana nebo roh odkud se má začínat • barvy: • kód barvy + procento nebo délka, jak daleko podél gradientu bude barva umístěna • podpora: Firefox16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

  8. lineární gradienty – příklady • linear-gradient(270deg, #abc 0%, #fff 100%) • odshora dolů • 270deg = top • top – výchozí hodnota pro směr • 0% - výchozí hodnota pro délku začínající barvy • 100% - výchozí hodnota pro koncovou barvu • strany, rohy: • top, right, bottom, left • úhly: • 0deg – doprava, 90deg – nahoru, 180deg – doleva, 270deg - dolů • linear-gradient(45deg, #00f 25%, #f00 25%, #ff0 75%, #080 75%) • ostré hrany mezi barvami

  9. radiální gradienty • kruhové nebo elipsovité • radial-gradient • umístění středu, tvar velikost, počáteční, koncová barva • podobně jako u lineárních gradientů můžeme definovat dosah barev • podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

  10. radiální gradienty • umístění středu • výchozí hodnota: center • př.: 50px 25px, … • tvar • výchozí hodnota: ellipse • circle • velikost • výchozí hodnota: cover – tvar gradientu dosahuje až ke straně boxu, která je nejdále od středu • contain – tvar gradientu dosahuje od středu k nejbližšímu rohu boxu • closet-side – podobně jako cover, ale dosahuje k nejbližší hraně středu

  11. Opakování gradientů • pro případ, že chceme gradienty opakovat • repeating-linear-gradient • repeating-radial-gradient • podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+