#1 
[css3] Image hoover menu el Sáb Jul 23, 2011 12:19 am
[css3] Image hoover menu el Sáb Jul 23, 2011 12:19 am
~ Admin TFW ~
Sexo: 
Mensajes: 3262 
Reputacion: 109
Puntos: 10097
Registrado: 16/11/2009
Localización: mexico
Edad: 17
Experimentando con css3 me salio esto, no era lo que yo quería hacer al principio, pero quede conforme xD
no sabia que nombre ponerle y me quede con Image hoover menu
El código es 100% creado por mi, no usa ningún tipo de javascript para la animación, solo css3
Vista previa online
http://buzzdungeon.es.tl/menu.htm
*esta a la izquierda
Texto por encima de la pagina:
Css sin style tags:
Rojo: espacio entre el inicio de la pagina y el menu
Naranja: espacio entre el lado izquierdo y el menu
Marrón: espacio entre cada imagen
Verde: tiempo de la animación (ancho y alto)
Azul: tiempo de la animación (sombra)
*El alto y ancho por defecto de la imagen es de 25px y en hover es de 125px, para cambiarlo solo basta editar ambos heigh y width
*Pueden agregar cuantos menúes quieran, repitiendo el código de texto por encima de la pagina
*si lo agregan en el portal se vera extraño, estoy tratando de resolverlo
Saludos!
cualquier duda comenten
no sabia que nombre ponerle y me quede con Image hoover menu
El código es 100% creado por mi, no usa ningún tipo de javascript para la animación, solo css3
Vista previa online
http://buzzdungeon.es.tl/menu.htm
*esta a la izquierda
Texto por encima de la pagina:
<!-- aportado por http://funny2be.com -->
<div class="imglist">
<a href="#"><img src="http://funny2be.com/ad.png" alt="" /></a>
<a href="#"><img src="http://funny2be.com/ad.png" alt="" /></a>
<a href="#"><img src="http://funny2be.com/ad.png" alt="" /></a>
<a href="#"><img src="http://funny2be.com/ad.png" alt="" /></a>
<a href="#"><img src="http://funny2be.com/ad.png" alt="" /></a>
</div>
<!-- aportado por http://funny2be.com -->
Css sin style tags:
/* aportado por http://funny2be.com */
.imglist{
position: fixed;
top: 30px;
left: 0px;
}
.imglist img{
height:25px;
width:25px;
margin:5px;
display: block;
transition:width 1.2s,height 1.2s,box-shadow 1.2s;
-webkit-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
-moz-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
-o-transition:width 1.2s,height 1.2s,box-shadow 1.2s;
}
.imglist img:hover{
height:125px;
width:125px;
box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
-webkit-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
-moz-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
-o-box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.63);
}
/* aportado por http://funny2be.com */
Rojo: espacio entre el inicio de la pagina y el menu
Naranja: espacio entre el lado izquierdo y el menu
Marrón: espacio entre cada imagen
Verde: tiempo de la animación (ancho y alto)
Azul: tiempo de la animación (sombra)
*El alto y ancho por defecto de la imagen es de 25px y en hover es de 125px, para cambiarlo solo basta editar ambos heigh y width
*Pueden agregar cuantos menúes quieran, repitiendo el código de texto por encima de la pagina
*si lo agregan en el portal se vera extraño, estoy tratando de resolverlo
Saludos!
cualquier duda comenten
~Administrador de TFW~ 
