Zaobljeni uglovi

Zaobljeni uglovi boxova ne izlaze iz trenda. Web 2.0 ih obožava. Klijenti ih vole. A mi se pitamo na koji način ih izraditi? Kao što znamo, mogu se izraditi na puno načina; sa više sličica, jednom velikom slikom, pomoću CSS-a ili Javascripta.

Srećom, više nije potrebno te kodove pisati ručno. Na netu se nalaze već gotovi kodovi i generatori za sve naše potrebe. Cssjuice nam nudi čak 25 raznih tehnika za izradu.

No, koju od njih izabrati? Koja je najjednostavnija i najpraktičnija?

Ukoliko se radi o boxu fiksne širine i jedne boje (bez gradienta) tada je najjednostavnije korisiti jednu veliku .gif sliku.
Gif je relativno lagan, pogotovo ako je jednobojan. U ovom slučaju kreirati ću jedan takav box fiksne širine 300 px i duljine 700 px round.gif težine oko 22 Kb.
700px je visina slike, znači, maksimalna duljina na koju se moj box bude mogao razvući..

Pogledajte HTML

Zaobljeni rubovi
Rounded corners

Box 1
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.



Box 2
Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Pogledajte CSS kod

body
{
	text-align:left;
	font-family: arial;
}

#wrap
{
	width:820px;
	text-align:left;
	margin:0 auto;
	padding:10px;
}

.round
{
	width:280px;
	background:transparent url(round.gif) no-repeat top left;
	padding:10px;
	margin-bottom:10px;
}

.round .bottom  /*za donje uglove i rub*/
{
	background:white url(round.gif) no-repeat bottom left;
	font-size:1px;
	line-height:1px;
	height:14px;
	margin:0 -10px -10px -10px;
}

Pogledajte kako to izgleda u živo.

Želimo li na sličan način izraditi box koji se širi u visinu i širinu preporučam ovaj tutorial.