1 / 11

GWEB2

GWEB2. Mgr. Vlastislav Kučera 4. přednáška. Obsah přednášky. v ícenásobná pozadí velikost pozadí zobrazení pozadí gradienty. Vícenásobná pozadí. můžeme definovat více obrázků (barev) na pozadí j ednotlivé obrázky (barvy) oddělujeme čárkou p ř.:

bradley-walter
Download Presentation

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

More Related