CSS3 zaobljeni rubovi, sjena, gradijent

Svi mi na webu imamo hrpu elemenata koji su smješteni u raznim boxovima – modulima za što nam CSS3 pruža malo više slobode u dizajnu. Neki od svojstava koje možete koristiti su zaobljeni rubovi, sjena, gradijent …

Bitno za napomenuti je da ovi efekti rade samo sa novijim Internet preglednicima, za pojedina svojstva se ovo razlikuje, no u grubo bi to izgledalo ovako: Firefox (3.5+), Chrome (5.0+), Opera (10.5+), Safari (5.0+), a najlošiji od svih naravno je IE (9.0+).

CSS3 zaobljeni rubovi

Kako bi prikazali zaobljene rubove potrebno je definirati 3 svojstva koja možete vidjeti niže u primjeru. Promjenom vrijednosti tih svojstava što je kod mene postavljeno na 6px mijenjate i veličinu obruba.

.zaobljeni {
	color:#FFF;
	width: 500px;
	height: 50px;
	background-color: #00A8E8;
	border: 1px solid #00A8E8;
	padding: 20px;

	/* Parametri za zaobljene rubove */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

Dobijete ovo:

CSS3 krugovi i elipse

U slučaju da želite pomoću CSS-a napraviti krug, dovoljno je veličinu obruba povećati na 50%.

.krug {
	color:#FFF;
	width: 100px;
	height: 100px;
	background-color: #00A8E8;
	border: 1px solid #00A8E8;
	padding: 20px;

	/* Parametri za zaobljene rubove - krug */
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

Dobijete ovo:

CSS3 sjena

U odnosu na prethodno korištena svojstva za obrub koje smo definirali sa jednom vrijednosti, sjenčanje ćemo napraviti sa ukupno 4 vrijednosti od maksimano mogućih 6.

1. vrijednost je odstupanje po horizontali (negativne vrijednosti diktiraju suprotan smjer)
2. vrijednost je odstupanje po vertikali (negativne vrijednosti diktiraju suprotan smjer)
3. vrijednost je blur (zamagljivanje)
4. vrijednost je boja sjene

.sjena {
	color:#FFF;
	width: 500px;
	height: 50px;
	background-color: #00A8E8;
	border: 1px solid #00A8E8;
	padding: 20px;

	/* Parametri za sjenu */
	-moz-box-shadow: 5px 5px 5px #CCC;
	-webkit-box-shadow: 5px 5px 5px #CCC;
	box-shadow: 5px 5px 5px #CCC;
}

Dobijete ovo:

CSS3 linijski gradijent

Sad dolazimo do svojstava kojima se definira linijski gradijent u sklopu već poznatog nam svojstva “background-image” na način da se prvo definiraju dvije boje koje će napraviti gradijent. Zada vrijednost upisanih boja s lijeva na desno se prikazuje gradijent od vrha prema dnu. Za detalje Guglajte gradijent svojstvo ima još puno toga što se može definirati, smjer/kut, odstupanje, … :-)

.gadijent {
	color:#FFF;
	width: 500px;
	height: 50px;
	border: 1px solid #00A8E8;
	padding: 20px;

	/* Parametri za gradijent */
	background-image: -webkit-linear-gradient(#00A8E8, #000);
	background-image: -moz-linear-gradient(#00A8E8, #000);
	background-image: -o-linear-gradient(#00A8E8, #000);
	background-image: linear-gradient(#00A8E8, #000);
}

Dobijete ovo:

Sva svojstva zajedno

Sad kad ste naučili kako to izgleda na pojedinim primjerima evo i jednog koji kombinira sve 3 vrste CSS3 svojstava.

.zajedno {
	color:#FFF;
	width: 500px;
	height: 50px;
	background-color: #00A8E8;
	border: 1px solid #00A8E8;
	padding: 20px;

	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;

	-moz-box-shadow: 5px 5px 5px #CCC;
	-webkit-box-shadow: 5px 5px 5px #CCC;
	box-shadow: 5px 5px 5px #CCC;

	background-image: -webkit-linear-gradient(#00A8E8, #000);
	background-image: -moz-linear-gradient(#00A8E8, #000);
	background-image: -o-linear-gradient(#00A8E8, #000);
	background-image: linear-gradient(#00A8E8, #000);
}

Dobijete ovo:

Nadam se da je bilo dovoljno jasno, sva pitanja ili eventualne dopune bacite u komentare :-)

Ovo su jednostavnije primjene svojstava, za detalje iskoristite moć Google tražilice :-)