bljeni rubovi bez slika
U prošlom tutorijalu napravili smo CSS okvire sa zaobljenim rubovima, ali smo koristili slike. Slike smo prije nacrtali te ih posložili unutar okvira tako da dobijemo željeni efekt. Sada ćemo napraviti istu stvar, ali na drugi način. Nećemo koristiti slike nego samo div i b elemente. Na njih ćemo primijeniti CSS kojim ćemo oblikovati naše zaobljene rubove. Prvo napravimo CSS i kopirajmo ga u head dio.
<style type="text/css">
div#okvir{ margin: 0;background: #9bd1fa; width:300px}
b.rubgornji, b.rubdonji{display:block;background: #ffffff}
b.rubgornji b, b.rubdonji b{display:block;height: 1px;
overflow: hidden; background: #9bd1fa }
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rubgornji b.r4, b.rubdonji b.r4{margin: 0 1px;height: 2px}
div.sadrzaj{padding-left:10px}
</style>
Prvo smo definirali div element okvir u kojem ćemo "crtati" rubove. Elementi sa kojima ćemo crtati rubove su <b> elementi. Razlog zašto baš njih koristimo je jednostavan. Zauzima samo jedan znak te samim tim i cijeli dokument zauzima manje prostora i pregledniji je. Ovo je sve što trebamo napraviti sa CSS-om. Sada trebamo iskoristiti gore napisani kod za našu stranicu. Kod za prikaz okvira bi izgledao ovako:
<div id="okvir">
<b class="rubgornji"><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
<div class="sadrzaj">
Ovdje upisite sadrzaj vaseg okvira<br>
Ovaj okvir ne koristi slike za rubove
</div>
<b class="rubdonji"><b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>
CSS-om smo definirali izgled okvira i rubova, a sada samo te definicije iskoristili da bi prikazali okvir. Elementima <b> smo nacrtali rubove. Naša boja okvira je #9bd1fa koju vi naravno prilagodite svojoj web lokaciji. Osim toga možete promijeniti i stil klase sadrzaj. Tu definirajte način prikazivanja, font, boju teksta, margine, itd. Unutar div elementa sa klasom sadrzaj ide sadržaj našeg okvira. Ovo je veoma jednostavan kod i lako se koristi te je puno lakši za korištenje nego okviri koji koriste slike. Prednost okvira sa slikama je ta što slika može biti mnogo ljepše zaobljena (rubovi su manje zupčasti) pa je i sam okvir mnogo ljepši i oku ugodniji
U prošlom tutorijalu napravili smo CSS okvire sa zaobljenim rubovima, ali smo koristili slike. Slike smo prije nacrtali te ih posložili unutar okvira tako da dobijemo željeni efekt. Sada ćemo napraviti istu stvar, ali na drugi način. Nećemo koristiti slike nego samo div i b elemente. Na njih ćemo primijeniti CSS kojim ćemo oblikovati naše zaobljene rubove. Prvo napravimo CSS i kopirajmo ga u head dio.
<style type="text/css">
div#okvir{ margin: 0;background: #9bd1fa; width:300px}
b.rubgornji, b.rubdonji{display:block;background: #ffffff}
b.rubgornji b, b.rubdonji b{display:block;height: 1px;
overflow: hidden; background: #9bd1fa }
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rubgornji b.r4, b.rubdonji b.r4{margin: 0 1px;height: 2px}
div.sadrzaj{padding-left:10px}
</style>
Prvo smo definirali div element okvir u kojem ćemo "crtati" rubove. Elementi sa kojima ćemo crtati rubove su <b> elementi. Razlog zašto baš njih koristimo je jednostavan. Zauzima samo jedan znak te samim tim i cijeli dokument zauzima manje prostora i pregledniji je. Ovo je sve što trebamo napraviti sa CSS-om. Sada trebamo iskoristiti gore napisani kod za našu stranicu. Kod za prikaz okvira bi izgledao ovako:
<div id="okvir">
<b class="rubgornji"><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
<div class="sadrzaj">
Ovdje upisite sadrzaj vaseg okvira<br>
Ovaj okvir ne koristi slike za rubove
</div>
<b class="rubdonji"><b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>
CSS-om smo definirali izgled okvira i rubova, a sada samo te definicije iskoristili da bi prikazali okvir. Elementima <b> smo nacrtali rubove. Naša boja okvira je #9bd1fa koju vi naravno prilagodite svojoj web lokaciji. Osim toga možete promijeniti i stil klase sadrzaj. Tu definirajte način prikazivanja, font, boju teksta, margine, itd. Unutar div elementa sa klasom sadrzaj ide sadržaj našeg okvira. Ovo je veoma jednostavan kod i lako se koristi te je puno lakši za korištenje nego okviri koji koriste slike. Prednost okvira sa slikama je ta što slika može biti mnogo ljepše zaobljena (rubovi su manje zupčasti) pa je i sam okvir mnogo ljepši i oku ugodniji
No comments:
Post a Comment