Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.

Prezentace na téma: "Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty."— Transkript prezentace:

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

2  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty

3  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  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  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  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  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: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

8  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  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  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  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+