In acest articol vom vedea cum putem folosi gradiente in browser doar cu ajutorul CSS-ului. Pentru acest lucru vom construi o bara de navigatie in care vom folosi atat colturile rotunjite din articolul trecut, cat si cateva reguli CSS noi, prin care vom obtine gradiente fara nicio imagine de background.
Rezultatul final va arata asa:
Vom incepe un un layout de baza pe care sa incepem sa construim. Nu vom avea o pagina completa, ci doar bara de navigatie pe care sa aplicam stilurile.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Gradiente fara Imagini</title> </head> <body> <div id="nav"> <ul> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 1</a></li> </ul> </div> </body> </html>
Pentru inceput sa aplicam cateva stiluri de baza pentru a transforma lista intr-o bara de navigatie:
#nav {
margin: 10px auto 0px auto;
width: 980px;
padding: 4px;
overflow: auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
ul {
padding: 0px;
margin: 0px auto;
}
li {
list-style-type: none;
display: inline;
}
a {
display: block;
float: left;
padding: 9px;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
font-size: 14px;
}
Dupa cum se poate vedea am folosit cateva reguli CSS de baza, prin care sa obtinem bara de navigatie. De asemenea puteti observa ca am folosit proprietatea overflow: auto la div-ul cu id=”nav”. Asta pentru ca stiu ca voi avea elemente float-ate in interior, iar aceasta proprietate se asigura div-ul se va comporta asa cum vrem. Mai multe detalii despre aceasta tehnica gasiti aici.
Sa trecem la subiectul articolului. Gradient fara imagini de background. Vestea buna este ca aceasta tehnica este suportata si pe Internet Explorer, inclusiv versiunea 6, doar ca are mici limitari. Mai multe detalii cand ajungem acolo.
Acum sa adaugam codul CSS ca sa obtinem gradientul pe bara de navigatie:
#nav {
margin: 10px auto 0px auto;
width: 980px;
padding: 4px;
overflow: auto;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #999999),color-stop(0.4, #444444), color-stop(0.5, #222222), color-stop(1, #000000));
background: -moz-linear-gradient(top, #999999, #444444 49%, #222222 50%, #000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#000000')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#999999', EndColorStr='#000000');
}
La fel ca si la border-radius, nu exista un standard implementat pentru gradiente. Din acest motiv, trebuie sa scriem proprietati individuale, pe care le suporta fiecare browser in parte. Dupa cum puteti intui, -webkit-gradient si -moz-linear-gradient sunt proprietatile pentru motorul Webkit (Chrome si Safari), respectiv Mozilla (Firefox). Acum ajungem la suportul pentru IE. Veti observa ca avem doua proprietati pentru Internet Explorer. Proprietatea filter este suportata de IE6 si IE7, iar -ms-filter este folosita pentru IE8.
Am ajuns la limitarile despre care vorbeam in ceea ce priveste gradientele in Internet Explorer. Daca studiem sintaxa folosita pentru webkit si mozilla si o comparam cu cea pentru IE, observam o diferenta importanta. Proprietatile webkit/mozilla iau ca parametrii patru culori, iar cele pentru IE doar doua.
Asta pentru ca la webkit/mozilla avem posibilitatea sa specificam punctele de pornire si oprire a gradientelor. Astfel, putem avea gradiente multiple, folosind culori multiple. Pe Internet Explorer, in schimb, putem sa specificam doar culoarea de inceput si cea de sfarsit a gradientului. Astfel, efectul este unul similar, dar mai putin spectaculos.
Acum vom adauga un efect de :hover, care nu este neaparat necesar, dar face bara de nevigatie sa arate mai bine.
a:hover {
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.4, #222222), color-stop(0.5, #444444), color-stop(1, #999999));
background: -moz-linear-gradient(top, #000000, #222222 49%, #444444 50%, #999999);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#999999')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#999999');
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Cam atat. Acum bara de navigatie are si un pic de dinamism. Gasiti un demo aici. CSS-ul este inline tocmai pentru ca voi sa puteti sa luati codul, sa-l folositi si sa-l modificati. Daca aveti idei de imbunatatire/infrumusetare rezultatului, lasati un comentariu cu link spre ce ati realizat.