<< Barvy | Tvorba webu | Optimalizace webu >>
CSS grafika
Zaoblení a stínování
- border-radius - zaoblení bloků
- box-shadow - stínování bloků
- text-shadow - stínování textu
Linky a rámečky
Pozadí bloků a stránek
- background - souhrnné nastavení pozadí prvku
background: color position/size repeat origin clip attachment image|initial|inherit; - background-color - barva
background-color: color|transparent|initial|inherit; - background-image - obrázek(obrázky)
background-image: url('URL')|none|initial|inherit; - background-repeat - způsob opakování obrázku
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; - background-attachment - fixace/uvolnění obrázku na pozadí bloku
background-attachment: scroll|fixed|local|initial|inherit; - background-position - umístění obrázku na pozadí bloku
background-position: top|center|bottom|left|center|right|x|y|initial|inherit;
CSS3 vlastnosti
- background-clip - nastavení zobrazení pozadí v rámci bloku
background-clip: border-box|padding-box|content-box|initial|inherit; - background-origin - nastavení opozice pozadí v rámci bloku
background-origin: padding-box|border-box|content-box|initial|inherit; - background-size - nastavení rozměru obrázku na pozadí
background-size: auto|šířka|cover|contain|initial|inherit;
Barevné přechody
- vytváří se jako barevná výplň pozadí nebo obrázek na pozadí bloku nebo strany
- využití CSS pravidel background nebo background-image
Lineární gradient
- background: linear-gradient(směr|úhel, barva1, barva2, ...)
- background: repeating-linear-gradient
Radiální gradient
- background: radial-gradient
- background: repeating-radial-gradient
Ukázka kódu
<style>
* {padding: 0; margin: 0;}
main {margin: 4em auto; width: 80%;}
.tlacitko-male {padding: 0.5em;}
.tlacitko-velke {padding: 1.5em;}
.okraj-sedy{border: 3px silver solid;}
.okraj-zeleny{border: px green dotted;}
.zaobleni-male{border-radius: 0.2em;}
.zaobleni-velke{border-radius: 1em;}
.stin-velky {box-shadow: black 0 0 8px;}
.stin-maly {box-shadow: green 0 0 4px;}
.pozadi-svetle{background-image: linear-gradient(to bottom,#7d7d7d, #c4c4c4, #7d7d7d);}
span.pozadi-svetle:hover{background-image: linear-gradient(to bottom,#c4c4c4, #7d7d7d, #c4c4c4); color: white;}
span.pozadi.svetle:hover{background-image: linear-gradient(to bottom,#c4c4c4, #7d7d7d, #c4c4c4); color: white;}
.pozadi-tmave{background-image: linear-gradient(to bottom, #429422, #146919, #429422); color: white;}
span.pozadi-tmave:hover{color: black; background-image: linear-gradient(to bottom, #32c239, #a6f786, #32c239);}
</style>
<span class="tlacitko-velke okraj-sedy zaobleni-velke stin-velky pozadi-svetle">Stínované tlačítko velké</span> <span class="tlacitko-male okraj-zeleny zaobleni-male stin-maly pozadi-tmave">Stínované tlačítko malé</span>
Stylovaná tlačítka
Průhlednost prvků
- vlastnost opacity a rgba zápis
Transformace bloků
- posun, natočení, měřítko ...
Animace
- přechody, klíčové snímky ...
Rastrová grafika pro web
GIF (Graphics Interchange Format)
- bezztrátová komprese LZW
- barevná hloubka 1 Byte (256 barev)
- možnost jedné průhledné barvy (pozadí)
- možnost uložení více obrázků v jednom souboru a vytvoření animace
- možnost prokládaného ukládání obrázku (rychlý náhled)
- vhodný formát pro grafiku složenou z jednobarevných plošek - ikony, tlačítka, loga, diagramy ...
- dnes již neperspektivní - nahrazuje se formátem PNG
JPEG
- formát se ztrátovou kompresí
- umožňuje nastavit stupeň komprese (kvalita obrázku)
- umožňuje uložit obrázek progresivně (zobrazuje se postupně v několika průchodech)
- vhodný formát pro fotografie s velkým počtem barev a s barevnými přechody
- nevhodný formát pro obrázky s velkými jednobarevnými plochami a ostrými hranami (Gibbsův jev)
- možnost progresivního kódování pro rychlejší zobrazení v prohlížeči
PNG (Portable Network Graphic Format)
- sloučení výhody GIFu a JPGu
- možnost uložení rastrů se 48 bitovou barevnou hloubku
- samostatný alfa kanál (8 nebo 16 bit), který umožňuje uložit průhlednost a průsvitnost
- použití bezztrátové komprese, LZ77 a Huffmanova kódování
- možnost prokládání pro rychlejší zobrazení v prohlížeči
Úspornost rastrové grafiky
- zmenšení rozlišení na nutnou míru
- snížení barevné hloubky - využití adaptivních barevných palet
- vypuštění informací, které oko nevnímá -
- komprese
- ztrátová (JPEG)
- bezztrátová (GIF, PNG)
- pro firemní loga, schémata apod. jsou úspornější vektorové formáty
