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:

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:

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:

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:

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

Webhosting C4



Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu - RSS