CLIENT: Second Nature
CLIENT: Ungureanu Imobiliare
CLIENT: Agriferma
CLIENT: Bere Bauturi Bucuresti
CLIENT: Fatal Beauty Studio
Aaa cum probabil ati auzit de acum, animatiile CSS3 sunt un instrument puternic, care va permite sa creati animatii care ruleaza fara a fi nevoie de a aplica scripturile suplimentare la pagina. Ceea ce este chiar mai bine, în urmatoarea generatie de browsere vom avea instrumente mai puternice, inclusiv transformari 3D (deja prezente in Safari).
Dar ce conteaza pentru noi astazi? In momentul de fata doar trei browsere va ofera posibilitatea de a anima proprietatile CSS3 – Chrome, Safari si Opera, care împreuna ocupa doar o mica parte din piata browser-ului. Firefox este de asteptat sa se alature în curând clubului, si cu lansarea iminenta a IE9, face brusc sens pentru a începe mobilizarea aceasta tehnica.
Asa ca astazi facem ceva practic – un simplu CSS3 meniul de navigare animat, care se degradeaza cu gratie în browserele mai vechi si este viitorul fonic pentru a lucra cu urmatoarea generatie de browsere.
XHTML
Meniul este organizat ca o lista neordonata. Aceasta este structura cea mai potrivita pentru un meniu, deoarece ofera o cale usoara de a aplica stiluri pe link-urile de meniu.
- demo.html
<li><a class="home" href="#">
<span>Home</span>
</a></li>
<li><a class="about" href="#">
<span>About</span>
</a></li>
<li><a class="services" href="#">
<span>Services</span>
</a></li>
<li><a class="portfolio" href="#">
<span>Portfolio</span>
</a></li>
<li><a class="contact" href="#">
<span>Contact</span>
</a></li>
</ul>
În interiorul fiecarui li avem un hyperlink în interiorul acestuia. În mod implicit aceste deschideri sunt ascunse si sunt afisate numai atunci când atingem cu mousul peste link. Fiecare legatura are un nume unic de clasa, care este folosit pentru a da un fond unic si un stil de control interior, dupa cum veti vedea într-o clipa.
CSS3
styles.css – Partea 1
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
background:#111 no-repeat;
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
styles.css – Partea 2
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:‘Myriad Pro’,Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url(‘img/navigation.jpg’) no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
styles.css – Partea 3
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Buton Albastru */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Buton Portocaliu */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Buton Galben */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Buton Roz */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
Cu toate acestea meniul nostru de navigare este gata !
Descarca sursa gata realizata.
