|
Pravi izbor boja i pozadine je nešto što će, zasigurno, svako web sjedište učiniti
atraktivnijim. Dok je izbor navedenih elemenata pri izradi web sjedišta prepušten
vašem osobnom odabiru, ovdje ćemo vam pokazati kako postupak izbora učiniti lakšim.
Naime, postavljanje ovih parametara u CSS datoteku daje vam mogućnost da s jednog
mjesta, gotovo trenutno, promijenite izgled čitavog web sjedišta.
color
Postavlja boju teksta u zadanom elementu.
p {
color: green;
}
<p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
background-color
Definira boju pozadine za zadani element. Boja pozadine se proteže do granice
elementa – uključujući odmak.
div.primjer {
background-color: #3C6;
color: #000;
padding: 6px;
border: 1px solid #000;
}
<div class="primjer">Lorem
ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
Atribut background-color kod oznake
<hr> vidimo kao boju elementa.
background-image
Postavlja pozadinsku sliku u element. Ukoliko se primjenjuje s niže navedenim
svojstvima, može se definirati fiksni položaj pozadinske slike ili ponavljanje po
jednom od pravila.
background-repeat
Ponavljanje pozadinske slike. Može poprimiti sljedeće vrijednosti: repeat
– ponavlja sliku; no-repeat – ne ponavlja sliku; repeat-x – ponavlja
sliku samo po vodoravnoj osi; repeat-y – ponavlja sliku samo po uspravnoj
osi.
div.pozadina {
background-image: url("css.gif");
background-repeat: repeat-x;
border: 1px solid #000;
height: 150px;
color: green;
}
<div class="pozadina">Lorem
ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
background-attachment
Ovo svojstvo definira pomiče li se pozadinska slika s elementom ili ne. Može
poprimiti vrijednost scroll – pomiče se, ili fixed – ne pomiče
se. Primjerice, ukoliko želimo u tijelu dokumenta postaviti fiksnu pozadinu, možemo
to napraviti sljedećim kôdom:
body {
background-image: url("css.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Efekt na stranici sličan je efektu u sljedećem okviru:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur urna eu nulla fermentum elementum. Proin
malesuada enim et lacus elementum et lacinia lectus cursus. Fusce urna felis,
blandit a consectetur ac, accumsan eget magna. Phasellus scelerisque viverra
congue. Duis aliquam nulla pulvinar augue consectetur consectetur. In vel
arcu orci, vel varius lacus. Phasellus mollis sem eu purus tempor ut sollicitudin
ante bibendum. Maecenas auctor, velit vel porttitor imperdiet, justo libero
eleifend justo, in tristique eros purus eget ante. Donec pretium elit vitae
diam tempus mollis. Donec sit amet turpis ut nisi suscipit cursus. Sed at
dolor libero.
Nullam accumsan gravida dapibus. Curabitur augue nibh, lobortis ac tempus
a, mattis sed tortor. Duis et diam mauris. Nunc eu diam dictum enim tempor
mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Praesent posuere bibendum pulvinar. Aenean et massa ligula.
Nulla a suscipit nulla. Maecenas consectetur pulvinar erat, id dapibus felis
porta in. Sed rutrum ipsum sit amet odio adipiscing eu ullamcorper purus
accumsan. Nunc tellus dolor, vestibulum eget fermentum sed, feugiat eget
libero. Nunc ligula lorem, viverra dapibus malesuada interdum, commodo id
velit.
background-position
Pozadinska slika predefinirano se postavlja u gornji lijevi kut dokumenta.
Background-position je svojstvo koje omogućava postavljanje
početnog položaja od kojeg će se postaviti slika. U pravilu se postavljaju dvije
vrijednosti – jedna za vodoravni, a druga za okomiti položaj. Vrijednosti su
right, center, left za vodoravni položaj, zatim top, center, bottom
za vertikalni ili postotci, odnosno udaljenost od gornjeg lijevog kuta.
body {
background-image: url("css.gif");
background-repeat: no-repeat;
background-position: right top;
}
Efekt na stranici sličan je efektu u sljedećem okviru:
Lorem ipsum dolor sit amet
Skraćeni selektor – background
Skraćeno svojstvo. Mogu se navesti sva navedena svojstva bez zadanog redoslijeda
navođenja:
body {
background: url("css.gif") no-repeat
right top fixed;
}
|
