Meniu animat cu CSS3 - Forum

[ Mesaje noi · Membrii · Regulamentul forumului · Căutare · RSS ]
Pagina 1 din 11
Forum » Tutoriale si Resurse (T&R) » T&R CSS3 » Meniu animat cu CSS3
Meniu animat cu CSS3
GravediggerData: Joi, 2013-01-17, 6:49 PM | Mesaj # 1
Gravedigger
Administrator
Grup: Administratori
Mesaje: 542
Premii: 10
Reputatie: 5
Stare: Offline
Un alt exemplu ce ofera CSS3 şi tranziţii pentru a crea meniuri animate.
Pentru a crea un un meniu animat in acest stil (vezi un exemplu aici) mergem la Desing -> Editati HTML si cautam linia si exect deasupra ei se va adauga datele de mai jos:

Cod
<style type="text/css">
#menucircle { margin-left:50px; }
a.menucircle {
background-image: -moz-linear-gradient(100% 100% 90deg, #ABC, #456);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ABC), to(#456));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF445566', EndColorStr='#FFAABBCC');
background-color: #000;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
border-radius: 10px;
color: #FFF !important;
display: block;
float:left;
font-family: Helvetica;
font-size:30px;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
margin: 0 10px;
width: 150px;
}
a.menucircle:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transition-duration: .4s;
-webkit-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .4s;
background-image: -moz-linear-gradient(100% 100% 90deg, #DEF, #567);
background-image: -webkit-gradient(linear, left bottom, left top, from(#DEF), to(#567));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF556677', EndColorStr='#FFDDEEFF');
color: #FF0;
}
</style>

ultimul pas deschide un nou vidget HTML/Javascript si adauga urmatorul cod:

Cod
<div id="menucircle">
<a class="menucircle" href="url_link">TEXT 1</a>
<a class="menucircle" href="url_link">TEXT 2</a>
<a class="menucircle" href="url_link">TEXT 3</a>
<!-- alte link-uri -->
</div>

 
GravediggerData: Joi, 2013-01-17, 6:49 PM | Mesaj # 2
Gravedigger
Administrator
Grup: Administratori
Mesaje: 542
Premii: 10
Reputatie: 5
Stare: Offline
Cei care vor sa il adapteze pentru ucoz si nu stiu cum sa imi ceara suportul in comentarii si am sa ii ajut cu mare placere happy
 
Forum » Tutoriale si Resurse (T&R) » T&R CSS3 » Meniu animat cu CSS3
Pagina 1 din 11
Căutare: