Tvorba webu » CSS » Barvy v CSS

Barvy v CSS

Pomocí CSS lze obarvit text a jeho pozadí nebo vložit obrázek na pozadí, se kterým lze dělat spoustu věcí, například nastavit opakování či pozici obrázku.

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

Color

Vlastnost color určuje barvu textu a lze ji použít na všechny elementy. Jako hodnota se uvádí transparent nebo barva zapsaná hexadecimálním kódem či anglickým názvem (pouze 16 základních barev). Přehled barev i s kódy a názvy najdete níže 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í a lze ji použít na všechny elementy. Jako hodnota se uvádí barva zapsaná hexadecimálním kódem nebo anglickým názvem (pouze 16 základních barev).

Podle následujícího příkladu budou mít nadpisy h1 stříbrné pozadí.

h1{background-color : Silver;}

Background-image

Vlastnost background-image určuje obrázek na pozadí. Obrázek se ve výchozím nastavení opakuje směrem dolů a doprava, ale pomocí vlastností background-repeat, background-attachment a background-position to lze změnit a dosáhnout tak zajímavých grafických výsledků. Tuto vlastnost lze použít u všech elementů.

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 a zobrazí se pouze jednou
• inherit - hodnota se zdědí 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 při rolování pohybuje se stránkou, nebo zůstává 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í na stránce a při rolování 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říklad 50% 50%: levý horní roh obrázku se zobrazí uprostřed
• Délkové jednotky – například 100px 10px: levý horní roh obrázku se zobrazí 100 pixelů zleva a 10 pixelů shora
• 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řed
• 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ědí po rodičovském prvku

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

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

Background

Background je sdružená vlastnost, pomocí které lze ve zkráceném tvaru zapsat vlastnosti background-position, background-attachment, background-image, background-color a background-repeat.

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 lze je zapisovat i názvem, ovšem pouze anglicky.

Názvem lze zapsat mnoho barev, nejen základních 16, ale takový zápis už není validní podle původního standardu. Ostatní barvy proto zapisujte pomocí hexadecimálních kó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