Bienvenido, invitado Ingresar o Registrarse
| | MARCADOR
| LENGUAJE:
 


marcador:
RSS 1.0     RSS 2.0

Vistas Totales: 1911 - Respuestas Totales: 6

PUBLICADO POR: ChaKaL on 07/29/2014 16:27:32


ahora voy a tratar de poner los codigos de diferentes menus para que tengan variedad ya ire haciendo experimentos ya saben lo que me gusta andar curioseando solo es cuestion de copiar y pegar los codigos y cambiarles las imagenes o colores segun les paresca el primero es un menu que gira 360° y reduce su tamaño al pasar el mouse encima y al quitar el mouse regresa a su posicion y tamaño original con los nombres de las pestañas encima espero les guste



pd: la mejor manera de ver como funciona cada codigo y ver como es el efecto es probandolo espero los prueben y si tienen alguna idea podemos ver si se puede realizar saludos




/* MENU GIRANDO  */




#outer2 { 

position:relative;

background: transparent; 

padding-bottom:100px;


margin:0 auto;


}




#outer2 .menu{


background: transparent;


background-image:url(http://i.imgur.com/V6tiCY7.png);


background-position:center;


background-repeat: no-repeat;


height: 100px; 


width: 100px; 


border:none;


-webkit-filter: brightness(0.5);


  -moz-transform:scale(1);

  -webkit-transform:scale(1);

  -o-transform:scale(1);

  -ms-transform:scale(1);

 -moz-transition: all 1s ease-in-out;

  -webkit-transition: all 1s ease-in-out;

  -o-transition: all 1s ease-in-out;

  transition: all 1s ease-in-out;


}



#outer2 .menu2{


background: transparent;


background-image:url(http://i.imgur.com/V6tiCY7.png);


background-position:center;


background-repeat: no-repeat;


border:none;


height:100px; 


width:100px; 


-webkit-filter: none;


  -moz-transition: all 1s ease-in-out;

  -webkit-transition: all 1s ease-in-out;

  -o-transition: all 1s ease-in-out;

  transition: all 1s ease-in-out;

 -moz-transform:scale(0.5)rotateZ(360deg);

  -webkit-transform:scale(0.5)rotateZ(360deg);

  -o-transform:scale(0.5)rotateZ(360deg);

  -ms-transform:scale(0.5)rotateZ(360deg);


}



#outer2 .menu:nth-child(2),#outer2 .menu2:nth-child(2){background-image:url(http://i.imgur.com/lOwjFPj.png);

background-repeat:no-repeat;

background-center:center;

}


#outer2 .menu:nth-child(3),#outer2 .menu2:nth-child(3){background-image:url(http://i.imgur.com/40jpO78.png);

background-repeat:no-repeat;

background-center:center;

}



#outer2 .menu:nth-child(4),#outer2 .menu2:nth-child(4){background-image:url(http://i.imgur.com/jKE83uX.png);

background-repeat:no-repeat;

background-center:center;

}


#outer2 .menu:nth-child(5),#outer2 .menu2:nth-child(5){background-image:url(http://i.imgur.com/UZPgzhk.png);

background-repeat:no-repeat;

background-center:center;

}


#outer2 .menu:nth-child(6),#outer2 .menu2:nth-child(6){background-image:url(http://i.imgur.com/3hAQ2D2.png);

background-repeat:no-repeat;

background-center:center;

}


#outer2 .menu:nth-child(7),#outer2 .menu2:nth-child(7){background-image:url(http://i.imgur.com/njuSfqG.png);

background-repeat:no-repeat;

background-center:center;

}



#outer2 .menu:nth-child(8),#outer2 .menu2:nth-child(8){background-image:url(http://i.imgur.com/kaeSVt3.png);

background-repeat:no-repeat;

background-center:center;

}


#outer2 .menu a { 

position: absolute;

top: -20px;

right: 20px;

font-size:150%;

color: #FFF; 

    text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135;

}


#outer2 .menu2 a { 

position: absolute;

top: -20px;

right: 20px;

font-size:150%;

color: #FFF;

    text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135;

 }






PUBLICADO POR: ChaKaL on 07/29/2014 16:43:50


MENU CIRCULAR

este codigo me lo mostro una amiga  gipsy y yo solo lo tube que adaptar para que pueda funcionar en los perfiles de aqui el codigo le pertenece a un programador  llamado OLOMAN  




/* MENU CIRCULAR */

   

#outer2 { 

background-color: transparent; 

position: relative;

width: 520px;

margin: 50px auto;

height: 180px;

overflow: hidden;

list-style: none;

font: normal 12px "arial narrow", sans-serif;

}


#outer2 .menu,#outer2 .menu2{

position: absolute;

  bottom: 0;

  left: 50%;

  width: 88px;

  height: 300px;

  margin-left: -44px;

  line-height: 300px;

  text-align: center;

  box-sizing: border-box;

  -moz-transform-origin: top center;

  -webkit-transform-origin: top center;

  transform-origin: top center;

  -moz-transition: all .6s ;

  -webkit-transition: all .6s ;

  transition: all .6s ;

}


#outer2 .menu a,#outer2 .menu2 a{

display: inline-block;

  width: 100%;

  height: 48px;

  text-decoration: none;

  background: blue;

  color: white;

  line-height: 40px;

  vertical-align: bottom;

  border: 4px solid #ddd;

  border-radius: 30px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -moz-transition: all .6s ;

  -webkit-transition: all .6s ;

  transition: all .6s ;

}


#outer2:hover #outer2 .menu a,#outer2 .menu2 a{

background: purple;

}


#outer2:hover .menu:nth-child(2),#outer2:hover .menu2:nth-child(2){

-moz-transform: rotate(18deg);

  -webkit-transform: rotate(18deg);

  transform: rotate(18deg);

}


#outer2:hover .menu:nth-child(3),#outer2:hover .menu2:nth-child(3){

-moz-transform: rotate(-18deg);

  -webkit-transform: rotate(-18deg);

  transform: rotate(-18deg);

}


#outer2:hover .menu:nth-child(4),#outer2:hover .menu2:nth-child(4){

-moz-transform: rotate(-36deg);

  -webkit-transform: rotate(-36deg);

  transform: rotate(-36deg);

}


#outer2:hover .menu:nth-child(5),#outer2:hover .menu2:nth-child(5){


  -moz-transform: rotate(0deg);

  -webkit-transform: rotate(36deg);

  transform: rotate(36deg);

}


#outer2:hover .menu:nth-child(6),#outer2:hover .menu2:nth-child(6){

-moz-transform: rotate(-54deg);

  -webkit-transform: rotate(-54deg);

  transform: rotate(-54deg);

}


#outer2:hover .menu:nth-child(7),#outer2:hover .menu2:nth-child(7){

-moz-transform: rotate(54deg);

  -webkit-transform: rotate(54deg);

  transform: rotate(54deg);

}


#outer2:hover .menu:nth-child(8),#outer2:hover .menu2:nth-child(8){

transform: translateY(-100px);


-ms-transform: translateY(-100px);


-webkit-transform: translateY(-100px);



}

Volver Arriba




PUBLICADO POR: ChaKaL on 08/01/2014 03:02:07


este es un menu muy simple pero me gusto la imagen que le da un efecto de estar roto el fondo y al pasar el cursor en cada pestaña va apareciendo los nombres del menu girando simple pero me parecio chevere





/* MENU TEXTO GIRANDO */



#outer2 { 

position:relative;

background: transparent; 

padding-bottom:50px;

margin:0 auto;

}



#outer2 .menu,#outer2 .menu2{

background: transparent;

background-image:url(http://i.imgur.com/Kdq79mK.png);

background-repeat: no-repeat;

background-position:center;

height: 95px; 

width: 95px; 

border:none;

padding:2px;

}



#outer2 .menu2{

background: transparent;

background-image:url(http://i.imgur.com/Kdq79mK.png);

background-position:center;

background-repeat: no-repeat;

border:none;

height:95px; 

width:95px; 

padding:2px;

}


#outer2 .menu a{

font-size:20%;

-webkit-filter: brightness(0.1);

}


#outer2 .menu2 a { 

color:#339933;

font-size:120%;

-webkit-transition:  1s linear 0.5s; 

transition:  1s linear 0.5s;

-webkit-filter: brightness(1);

text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135;

-moz-transform:rotateZ(360deg);

-webkit-transform:rotateZ(360deg);

-o-transform:rotateZ(360deg);

-ms-transform:rotateZ(360deg);



}

Volver Arriba




PUBLICADO POR: Gipsy on 08/02/2014 19:22:08


Muy buenos efectos Chakal,ya tengo los códigos guardados  Gracias por compartirlos.

Me gustaria tener tbn el código de las ventanitas en los videos  si fueras tan amable

Ah otra cosita, será que en la parte de mis detalles se puede colocar una imagen como se ve en otras páginas?

Volver Arriba




PUBLICADO POR: ChaKaL on 08/03/2014 00:44:44



Gipsy escribió:

Muy buenos efectos Chakal,ya tengo los códigos guardados  Gracias por compartirlos.

Me gustaria tener tbn el código de las ventanitas en los videos  si fueras tan amable

Ah otra cosita, será que en la parte de mis detalles se puede colocar una imagen como se ve en otras páginas?


de nada gipsy ya sabes que me gusta compartir con la gente con los mismos gustos y si claro que te dare el codigo de los videos


en cuanto a lo que me preguntas de poner una imagen en mis detalles te refieres a poner una imagen de fondo? y lo quieres solamente en esa caja o en todas ? solamente aclarame y ya te digo o puedo hacer algunas pruebas 

besos  lindo sabado xaos xaos

Volver Arriba




PUBLICADO POR: Gipsy on 08/07/2014 20:17:08


Hola Chakal  Gracias por responderme

Si, es la parte de mis detalles solamente. No se con que código o nombre se ubica esta caja, queria colocarle una imagen diferente 

Linda tarde amigo, besos 

Volver Arriba




PUBLICADO POR: ChaKaL on 02/13/2015 03:30:58



bueno hace tiempo no ponia nada asi que aqui les dejo un menu simple con una pequeña transicion que al pasar el cursor encima se cubre con una pequeña capa mas obscurita transparente  igual si saben un poco de css pueden hacerle ciertos cambios como ponerle una imagen de fondo  o de color  o cambiarle el color de las letras ya segun su imaginacion  aqui les dejo el codigo





/* MENU CON TRANSICION */

  

#outer2 {
margin: 40px auto;
 text-align:center;
 font-size: 0;
}


#outer2 .menu,#outer2 .menu2{
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 80px;
 height: 80px;
 margin: 0 4px;
 border-radius: 50%;
 background: #7F8403;
 line-height: 100px;
 z-index: 2;
}



#outer2 .menu a,#outer2 .menu2 a{
 display: block;
 box-sizing: border-box;
 color: #fff;
 font-size: 12px;
 text-decoration: none;
}

#outer2 .menu:hover a,#outer2 .menu2:hover a{
font-weight: bold;
color: #000;
}

#outer2 .menu:before,#outer2 .menu2:before{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 90px;
  background: #eee;
  transition: 0.5s ease-in-out;
  opacity: .2;
  z-index: -1;
}

#outer2 .menu:hover:before,#outer2 .menu2:hover:before{
right: 100px
}

Volver Arriba
12/13/2017



*** Redplanetachat ***
redplanetachat