Boje I Pozadine

BOJE I POZADINE
Svojstvom background-color postavljamo boju pozadine elementa. Kada želimo

dodati css svojstvo u html element trebamo dodijeliti vrijednost svojstvu elementa
style.
Obrazac koji koristimo je dodavanje svojstva style unutar elementa odlomka kojem
mijenjamo boju pozadine:
<p style="background-color: vrijednost;">
Moguće vrijednosti su:

 ime boje (engleski nazivi): npr. yellow, black, purple
 heksadekadska RGB vrijednost: npr. #FFFF00, #00FF00...
 RGB kod boje – npr. rgb(255, 0, 0), rgb(255, 0, 255)
Ako želimo boju pozadine cijele web stranice postaviti u plavu dodjeljujemo svojstvo
style <body> elementu.
Tri načina za to su:
<body style="background-color: blue;">

<body style="background-color: #0000FF;">
<body style="background-color: rgb(0,0,255);">
Nismo više ograničeni kao kod html svojstva bgcolor samo na određivanje boja
pozadine cijele stranice ili ćelije u tablici.
Primjer promjene boje pozadine blok elementa naslova razine 1:
<h1 style="background-color: red;">Crveni naslov odlomka</h1>
Primjer promjene boje pozadine linijskog elementa <em> unutar odlomka:
<p>Pozadina <em style="background-color: green;">zelene</em> riječi.</p>
HTML nazivi boja : Color Names

Postoji 146 naziva boja je definiranih u HTML i CSS specifikacijama boja (16 osnovnih
boja i dodatnih 130).
U tablici se nalazi popis boja, zajedno s HEX i RGB vrijednostima.
16 osnovnih boja su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white i yellow.
Imena boja se lako koriste — samo upišite ime kao vrednost nekog svojstva koje se
odnosi na boje:
color: silver;
background-color: gray;
border-bottom-color: teal;
HTML slika kao pozadina :

Background Image
Kada želimo dodati css svojstvo u html element trebamo dodijeliti vrijednost svojstvu
elementa style.
Svojstvom background možemo postaviti više svojstava pozadine elementa
istovremeno. Redoslijed navođenja nije obvezujući.
Svojstva koja možemo postaviti su: background-attachment, background-
color,background-image, background-position, background-repeat.
Primjer dodavanja svojstva div elementu:
<div style="background: #fff url('putanja') top left no-repeat fixed;">
Ovaj primjer odjednom postavlja sva slijedeća svojstva i dodjeljuje im vrijednosti:
background-color: #ffffff;
background-image: url('putanja_do_slike');
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
Primjer dodavanja html svojstva style unutar <div> elementa:
<div style="background: url('krajolik.jpg') no-repeat 50% 20%;">
.
U ovom primjeru dodajemo sliku kao pozadinu bez ponavljanja po x i y osi. slika će
se nalaziti vodoravno na sredini (vrijednost 50%) i 20% od vrha stranice.
Ako želimo postaviti sliku kao pozadinu cijele web stranice dodjeljujemo
svojstvo style <body> elementu.
Primjer za dodavanje pozadinske slike cijele web stranice:
<body style="background: url('krajolik.jpg') no-repeat 50% 20%;">
Slika krajolik.jpg koju smo naveli kao vrijednost url svojstva mora se nalaziti u istoj
mapi kao i html datoteka.
Upravljanje pravcem postavljanja slika u pozadini
Pomoću svojstva background - repeat utiče se na postavljanje slike u pozadini.
Ako želimo da se pozadinska slika pojavi samo jednom koristi se vrijednost no-
repeat
body{
background - image: url (star.gif);
background-repeat: no-repeat;}
Ako se slika postavlja samo horizontalno - repeat-x ili vertikalno - repeat-y
body{
background-repeat: repeat-x;
body{
background-repeat: repeat-y;
}
RGB VRIJEDNOSTI BOJA
Boje se najčešće zadaju preko svojih RGB vrijednosti. Sve boje koje se vide na ekranu računari prave
tako što kombinuju 3 osnovne boje: crvenu, zelenu i plavu. To se zove RGB model boja.
Najlakše ćete odabrati boju i naći njenu RGB vrijednost u nekom programu za obradu slika, kao što
su Adobe Photoshop, Adobe Fireworks ili Corel Paint Shop Pro. Većina ovih programa sadrži birač
boja (engl. color picker) sličan Photoshopovom.
Kada se izabere boja iz spektra u biraču, vidjeće se vrijednosti za crvenu (R - red), zelenu (G-green) i
plavu (B-blue)
npr. boja lavande RGB: 200, 178, 230
siva boja: RGB:128,128,128
crna boja RGB:0, 0, 0
Bijela boja RGB:255, 255, 255
Pisanje RGB vrijednosti u opisima stilova
color: rgb(200, 178, 230); - navodimo svaku od tri vrijednosti na

skali od 0 do 255
color: rgb(78%, 70%, 90%), - zadavanje vrijednosti u procentima
color: #C8B2E6 - heksadecimalna verzija
U verziji CSS3 boje se mogu zadati i pomoću svojih HSL vrijednosti: Hue(boja), Saturation(zasićenost)
i Lightness (svjetloća).
Vrijednosti Hue se izražavaju u stepenima: crvena je na 00 , zelena na 1200 a plava na 2400 , dok su
ostale boje između.
Zasićenost se izražava u procentima od 0% siva do 100% (potpuno zasićena boja)
Svjetloća je takođe procentualna vrijednost: od 0% (najtamnija) do 100% (najsvjetlija).
U CSS-u HSL vrijednosti su date u obliku vrijednosti za boju i dvije procentualne vrijednosti.
npr za boju lavande:
color: hsl(265, 23%, 90%);
Za zadavanje heksadecimalnih vrijednosti boja postoji kraći način. Ako je vrijednost sastavljena iz tri
para istih cifara ili slova na primjer
color: #FFCC00; ili color:#993366;
onda svaki par možemo svesti na jednu cifru odnosno slovo
color: #FC0, ili color: #936;
Heksadecimalne vrijednosti
to su tri grupe dvocifrenih brojeva po jedna za crvenu, zelenu i plavu.

Struktura heksadecimalne RGB vrijednosti
# RRGGBB
Ispred heksadecimalnih RGB vrijednosti mora da postoji simbol #
U heksadecimalnom sistemu koristi se 16 cifara: 0-9 i A-F(ova slova predstavljaju brojeve10 - 15)
Decimalni 0 1 2 3 4 5 6 7 8 9 10 11
12 13 14 15
Hex 0 1 2 3 4 5 6 7 8 9 A B
C D E F
Osnova heksadecimalnog sistema je broj 16
00
0 - mjesto za šesnaestice
0 - mjesto za jedinice
Decimalni broj 32 predstavljen je kao 20 ( 2 šesnaestice i 0 jedinica)
Decimalni broj 42 predstavljen je kao 2A ( 2 šesnaestice i 10 jedinica)
RGBa boje
Sistem boja RGBa omogućava da zadate i boju i njenu providnost. Slovo "a" u RGBa zamjenjuje riječ
"alpha" što je dodatni kanal pomoću kojeg se upravlja stepenom providnosti od 0 (potpuno
providno) do 1 (potpuno neprovidno)
Kao pravilo stila piše se: color: rgba(0, 0, 0, 0.5);
Četvrta vrijednost 0.5 predstavlja stepen providnosti. To znači da se radi o crnoj boji sa stepenom
providnosti 50%, pa će se kroz nju nadzirati druge boje u pozadini
Internet Explorer i starije verzije ne podržavaju RGBa boje
postoji i drugi način da se element učini djelomično providnim, a to je pomoću CSS3 svojstva opacity.
Vrijednosti od 0 do 1
Vrijednost ovog svojstva primjenjuje se na cio element- i na prednji plan i na pozadinu.

npr ako je naslovu dodijeljena zelena boja i imamo bijelu pozadinu, kada se primjeni svojstvo
opacity, pozadina strane se vidi i kroz tekst i kroz okvir elementa.
h1 {color: green; background:white; opacity: 0.25;)}

h1 {color: green; backround: white; opacity: o.5;}
h1 {color: green; backroun: white; opacity: 1}

Boje I Pozadine

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Boje I Pozadine

Uploaded by

Copyright:

Available Formats

BOJE I POZADINE

Svojstvom background-color postavljamo boju pozadine elementa. Kada želimo

<p style="background-color: vrijednost;">

Moguće vrijednosti su:

Tri načina za to su:

<body style="background-color: blue;">

<h1 style="background-color: red;">Crveni naslov odlomka</h1>

Primjer promjene boje pozadine linijskog elementa <em> unutar odlomka:

<p>Pozadina <em style="background-color: green;">zelene</em> riječi.</p>

HTML nazivi boja : Color Names

HTML slika kao pozadina :

<div style="background: #fff url('putanja') top left no-repeat fixed;">

Ovaj primjer odjednom postavlja sva slijedeća svojstva i dodjeljuje im vrijednosti:

Primjer dodavanja html svojstva style unutar <div> elementa:

<div style="background: url('krajolik.jpg') no-repeat 50% 20%;">

<body style="background: url('krajolik.jpg') no-repeat 50% 20%;">

Upravljanje pravcem postavljanja slika u pozadini

Pomoću svojstva background - repeat utiče se na postavljanje slike u pozadini.

background - image: url (star.gif);

Ako se slika postavlja samo horizontalno - repeat-x ili vertikalno - repeat-y

background - image: url (star.gif);

background - image: url (star.gif);

Pisanje RGB vrijednosti u opisima stilova

color: rgb(200, 178, 230); - navodimo svaku od tri vrijednosti na

to su tri grupe dvocifrenih brojeva po jedna za crvenu, zelenu i plavu.

Osnova heksadecimalnog sistema je broj 16

Decimalni broj 32 predstavljen je kao 20 ( 2 šesnaestice i 0 jedinica)

Decimalni broj 42 predstavljen je kao 2A ( 2 šesnaestice i 10 jedinica)

Kao pravilo stila piše se: color: rgba(0, 0, 0, 0.5);

Vrijednost ovog svojstva primjenjuje se na cio element- i na prednji plan i na pozadinu.

h1 {color: green; background:white; opacity: 0.25;)}

You might also like