Tvorba webu » CSS » Barvy v CSS

Barvy v CSS

Pomocí CSS jde obarvit text, pozadí textu, vložit obrázek na pozadí s kterým lze dělat spostu věcí např. opakování obrázku, pozice obrázku...

Přehled všech vlastností barev a pozadí je shrnut v přehledných tabulkách.

Color

Vlastnost color určuje barvu text lze použít na všechny elementy, jako hodnota se uvádí transparent nebo barva a to jako hexakód nebo lze zapsat anglicky (pouze 16 základních barev), přehled barev i s kódy a jmény je níž na stránce.

Z příkladu je jasně vidět že nadpisy h1 budou zelené.

h1{color : Green;}

Background-color

Vlastnost background-color určuje barvu pozadí, lze použít na všechny elementy jako hodnota se uvádí barva a to jako hexakód nebo lze zapsat anglicky (pouze 16 základních barev).

Teď už snad jen dodám že nadpisy h1 podle následujícího příkladu budou mít stříbrné pozadí.

h1{background-color : Silver;}

Background-image

Vlastvost background-image určuje obrázek na pozadí, obrázek se opakuje směrem dolů a doprava, ale pomocí vlastností: background-repeat, background-attachment, background-position to lze změnit a dosáhnout tak pěkných grafických výsledků, tato vlasnost lze použít u všech elemnentů.

Hodnoty:

• url obrázku (cesta k obrázku)
• none
• inherit

Podle příkladu se na pozadí stránky vloží obrázek pozadi.gif.

body{background-image : pozadi.gif;}

Background-repeat

Vlastnost background-repeat určuje jak se bude obrázek na pozadí opakovat.

Hodnoty:

• repeat - Výchozí hodnota obrázek se opakuje doprava i dolů.
• repeat-x - Obrázek se opakuje vedle sebe doprava.
• repeat-y - Obrázek se opakuje dolů.
• no-repeat - Obrázek se neopakuje zobrazí se pouze jednou.
• inherit - Hodnota se zděí po rodičovském prvku.

Obrázek se tedy bude opakovat vedle sebe.

body{
background-image : url(w3/logo.gif);
background-repeat : repeat-x;
}

Background-attachment

Vlastnost background-attachment určuje zda se obrázek pohybuje při rolování se stránkou nebo je pořád na jednom místě.

Hodnoty:

• scroll - Při rolování se obrázek pohybuje se stránkou.
• fixed - Obrázek se při rolování nepohybuje.
• inherit - Hodnoty se zdědí z rodičovského prvku.

Obrázek se zobrazí v a při rolovaní zůstane na stejném místě.

body{
background-image : url(w3/logo.gif);
background-repeat : no-repeat;
background-attachment : fixed;
}

Background-position

Vlastnost background-position určuje umístění obrázku na pozadí.

Hodnoty:

• Procenta - např: 50% 50% levý horní roh obrázku se zobrazí na středu
• Délkové jednotky - např: 100px 10px levý horní roh obrázku se zobrazí 100 pixelů zleva a 10 pixelů zprava.
• top left - Obrázek se zobrazí nahoře vlevo.
• top center - Obrázek se zobrazí nahoře uprostřed.
• right top - Obrázek se zobrazí nahoře vpravo.
• right center - Obrázek se zobrazí vpravo uprostřed.
• left center - Obrázek se zobrazí vlevo uprostře.
• bottom left - Obrázek se zobrazí dole vlevo.
• bottom right - Obrázek se zobrazí dole vpravo.
• bottom center - Obrázek se zobrazí dole ve středu.
• inherit - Hodnota se zdě po rodičovském prvku

Podle příkladu se obrázek na pozadí se zobrazí uprostřed obrazovky.

body{
background-image : url(w3/logo.gif);
background-repeat : no-repeat;
background-position : 50% 50%;
}

Background

Background je združená vlastnost pomocí které jdou zapsat vlastnosti: Background-position, Background-attachment, Background-image, Background-color, Background-repeat ve skráceném tvaru.

Syntaxe je vidět v příkladu.

body{
background : Silver url(w3/poz.gif) repeat-x fixed top;
}

Bezpečné barvy

Bezpečných barev je 16 a mohou se zapisovat i jménem, ale samozřejmě jen anglicky.

Jménem se dá zapisovat spousta barev nejen základních 16, ale není to už validní proto ostatní barvy zapisujte pomocí hexakódů.

	Aqua		Gray		Navy		Silver
	Black		Green		Olive		Teal
	Blue		Lime		Purple		White
	Fuchsia		Maroon		red		Yellow

Další barvy

	#003366		#000099		#006699		#3366FF
	#336699		#0000CC		#0099CC		#3333CC
	#3366CC		#000066		#0066CC		#333399
	#003399		#006666		#0033CC		#669999
	#009999		#0066FF		#339966		#33CCFF
	#33CCCC		#3366FF		#00CC99		#3399ff
	#00CCFF		#3333CC		#00FFCC		#6699FF
	#0099FF		#666699		#00FFFF		#6666FF
	#6600FF		#00FF99		#99CCFF		#9900FF
	#6600CC		#66FFCC		#9999FF		#006600
	#339933		#66FFFF		#9966FF		#00CC00
	#00CC66		#66CCFF		#9933FF		#00FF00
	#66FF99		#CC99FF		#9900CC		#66FF66
	#99FFCC		#CC66FF		#003300		#66FF99
	#CCFFFF		#CC33FF		#009933		#99FF99
	#CCCCFF		#CC00FF		#33CC33		#CCFFCC
	#FFFFFF		#FF00FF		#009900		#FFFFCC
	#FFCCFF		#CC00CC		#66FF33		#FFCCCC
	#FF99FF		#660066		#99FF99		#FF99CC
	#CC66FF		#336600		#CCFF99		#FF66CC
	#FF33CC		#669900		#FFCC99		#CC3399
	#CC0099		#99FF33		#FF9999		#990099
	#993399		#CCFF66		#FF6699		#666633
	#333300		#FFFF99		#FF3399		#99CC00
	#CCFF33		#FF6666		#999966		#FF9933
	#FFFF66		#FF0066		#CCCC00		#FF6600
	#FFCC66		#CC6699		#FFFF00		#FF5050
	#FF9966		#993366		#FFCC00		#CC0066
	#660033		#CC6600		#990033		#993300
	#996633		#FF3300		#663300		#990000
	#CC9900		#FF0000		#996600		#800000
	#FF9900		#CC0000		#CC3300		#993333

Reklama