Webové technológie

Poznámky:

6. Farby, pozadia, obrázkové pozadia

Možnosti zápisu farby:

Zápis farby kľúčovým slovom:

Hodnota	Farba	Hodnota	Farba
aqua	modroz-elená	navy	tmavo-modrá
black	čierna	olive	olivová
blue	modrá	purple	fialová
fuchsia	purpurová	red	červená
gray	šedá	silver	strieborná
green	zelená	teal	tmavo modro-zelená
lime	neonovo-zelená	white	biela
maroon	gaštanová	yellow	žltá

Hexadecimálny zápis farby vo formáte RGB:

Zápis farby pomocou funkčnej notácie RGB:

background-color: rgb(255, 255, 0);

background-color: rgb(100%, 100%, 0);

Zápis farby vo formáte HSL:

background-color: hsl(0, 100%, 50%);

Vlastnosti pre definíciu pozadia:

background-color - Definovanie farby poziadia elementu.

background-image - Vloženie obrázka na pozadie elementu.
background-image: url(obrazok.gif)

background-repeat - Vlastnosť pre definíciu opakovania obrázka na pozadí.

• no-repeat - bez opakovania, obrázok sa vykreslí iba 1-krát
• repeat-x - obrázok sa bude opakovať po ose x (vodorovne)
• repeat-y - obrázok sa bude opakovať po ose y (zvisle)

background-position - Vlastnosť pre definíciu pozicie obrázka od okrajov elementa. Uvedie sa pozícia x a y.

• Hodnota slovom
  • left - zarovnanie k ľavému okraju
  • right - zarovnanie k pravému okraju
  • center - zarovnanie na stred
  • top - zarovnanie k hornému okraju
  • bottom - zarovnanie k dolnému okraju
• Presná hodnota číslom v px
  • x y

background-attachment - Touto vlastnosťou s hodnotou fixed zakážeme posúvaniu obrázka s obsahom stránky (napr. na pozadí).

background-size - Táto vlastnosť určuje rozmery obrázku na pozadí. (CSS3)

background-clip - Touto vlastnosťou špecifikujeme v akej oblasti obsahového bloku elementa sa má naše pozadie vykresliť (CSS3). Môže nadobúdať 3 hodnoty:

• border-box - pozadie sa vykreslí iba "na rámčeku".
• padding-box - pozadie sa vykreslí iba v oblasti vnútorného okraja.
• content-box - pozadie sa vykreslí iba v oblasti obsahu.

background-origin - Touto vlastnosťou určujeme, ku ktorému prvku obsahového bloku elementa má byť vlastnosť background-position umiestnená relatívne. (CSS3)

• border-box - pozadie sa bude zarovnávať k rámčeku .
• padding-box - pozadie sa bude zarovnávať k hrane vnútorného okraja.
• content-box - pozadie sa bude zarovnávať k hrane obsahu.

Zjednodušený zápis pozadia:

Obrázok na pozadí nie je potrebné deklarovať pomocou mnohých rôznych vlastností, všetko sa dá zvládnuť jediným zápisom, a to združenou vlastnosťou background. Jej hodnotami potom budô hodnoty vlastností background-color, background-image, background-repeat, background-position i background-atachment

Príklad:

body { background: #CC0000 url(images/pozadie.jpg) no-repeat top center; }

Ako nastaviť priehľadnoť elementu:

Priehľadnosť elementu môžeme nastaviť pomocou vlastnosti opacity, ktorá funguje od verzie CSS3. Môže nadobúdať číselné hodnoty od 0 po 1. Táto vlastnosť sa dá využíť napríklad pri obrázkoch.

Priehľadné pozadie pomocou formátu RGBA: (CSS3)

Verzia CSS3 nám ponúka novú funkciu, pomocou ktorej dokážeme nastaviť farbu aj s alfa kanálom. Totiž do formátu RGB pribudla nová hodnota a tou je voľba priehľadnosti farby.

background-color: rgba(255, 0, 0, 0.3)

Hodnota alfa kanálu môže byť od 0 (úplná priehľadnosť) až po 1 (nepriehľadnosť) a nadobúda podobu desatinných čísel.

To isté platí aj pre formát HSL, čiže HSLA.