In acest articol vom vedea cum putem obtine un efect de colturi rotunjite fara sa mai trecem prin laboriosul proces de a crea imagini si a le potrivi in fiecare colt in asa fel incat sa cream efectul dorit. Vom folosi, in schimb, ceva ce designerii dar si developerii au inceput deja sa adopte cu mare bucurie. CSS 3.
CSS 3 vine cu un set de proprietati menite sa rezolve in mod simplu probleme de design care necesitau pana acum tot felul de trucuri cu imagini si transparente. Printre acestea se numara colturile rotunjite.
Vom incepe cu un HTML care sa contina structura de baza pentru o pagina web. El arata asa:
<!DOCTYPE html> <html> <head> <title>Colturi rotunjite</title> </head> <body> <div id="wrapper"> <div id="header"> <!-- Continut header --> </div> <div id="section"> <!-- Continut principal --> </div> <div id="aside"> <!-- Continut sidebar --> </div> <div id="footer"> <!-- Continut footer --> </div> </div> </body> </html>
Acum o sa folosim CSS pentru a da structura paginii. Veti observa ca am folosit proprietatea height la fiecare dintre div-uri. Asta numai pentru ca nu am continut in niciunul dintre ele, si daca nu le specific o inaltime in pixeli nu vom vedea nimic.
#wrapper {
width: 980px;
margin: 0px auto 2px auto;
overflow: auto;
}
#wrapper div {
border: 1px solid #999;
margin-bottom: 10px;
}
#header {
width: 978px;
height: 150px;
}
#section {
width: 648px;
height: 450px;
float: left;
}
#aside {
width: 318px;
height: 450px;
float: right;
}
#footer {
width: 978px;
height: 30px;
clear: both;
}
Rezultatul o sa arate asa:
Acum ca avem structura paginii, sa adaugam colturile rotunjite. Pentru asta, modificam CSS-ul astfel incat sa arate asa:
#wrapper div {
border: 1px solid #999;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Dupa aplicarea noilor stiluri ar trebui sa obtineti ceva de genul asta:
*Sper ca se vede diferenta, chiar daca pozele sunt la o dimensiune destul de mica.
Sa explicam putin CSS-ul folosit. Pentru ca, deocamdata, standardul CSS 3 nu a fost implementat pe deplin de catre toate browser-ele, marii producatori si-au implementat un standard propriu, pana cand cel oficial va fi definitivat.
Astfel, -moz-border-radius este standardul implementat de cei de la Mozilla si functioneaza in Firefox. Chrome si Safari folosesc Webkit ca motor de randare a HTML-ului si CSS-ului, asa ca pentru ele folosim proprietatea -webkit-border-radius. Opera 10.5+ suporta proprietatea oficiala border-radius.
Internet Explorer nu are nicio proprietate care sa-l convinga sa arate colturi rotunjite, dar ni se promite ca incepand cu IE 9.0, acesta va fi compatibil cu proprietatea oficiala border-radius.