Spoznali bomo
- Plavajoče postavljanje elementov ob levi in desni rob
- Senčenje elementov
Izdelaj spletno stran, ki jo prikazuje spodnja slika in jo poimenuj 9vaja-css-priimek-ime.html. Stran naj bo izdelana v HTML5 in s CSS. Pazi na pravilno uporabo oznak in obliko zapisa kode.
CSS kodo vstavi v glavo spletne strani v oznako style.
Oblikovne lastnosti
- stran -
body:
- zunanji odmik: 20 pik
- besedilo:
- pisava: "Open Sans", sans-serif
- poravnava besedila: obojestranska poravnava
- razmik med vrsticami: 1,3 kratnik višine vrstice
- glavni naslov:
- barva: #996600
- razred
oznaka:
- barva besedila: siva
- pisava: Consolas, "Courier New", monospace
- oblika besedila: ležeče besedilo
- desna slika:
- poravnava: desno
- zunanji odmiki: zgoraj 5 pik, desno 0 pik, spodaj 5 pik, levo 10 pik
- leva slika:
- poravnava: levo
- zunanji odmiki: zgoraj 5 pik, desno 10 pik, spodaj 5 pik, levo 0 pik
- notranji odmiki: zgoraj 10 pik, desno 0 pik, spodaj 0 pik, levo 10 pik
- leva slika - senca (slika):
- sence v ozadju: slika senca.png
- položaj slike: desno spodaj
- prikaz slike: senca je prikazana samo enkrat
- velikost slike: širina 264 pik, višina 223 pik
- obroba: debelina 1 pika, polna črta, barva #ccc
- ali
- leva slika - senca (box-shadow):
- okvir okrog slike:
- poravnava: levo
- velikost: širina 250 pik, višina 210 pik
- zunanji odmiki: zgoraj 5 pik, desno 10 pik, spodaj 5 pik, levo 0 pik
- notranji odmiki: 12 pik na vseh robovih
- obroba: 12 pik na vseh robovih
- senca slike:
- velikost: širina 250 pik, višina 210 pik
- senca: horizontalni odmik 5 pik, vertikalni odmik 5 pik, prehod 5 pik, barva prehoda #666
- okvir okrog slike:
Opomba: Učinek sence na levi sliki lahko dosežemo s sliko sence v ozadju ali pa z novo lastnostjo CSS3 box-shadow.
