¿Cómo lograr este efecto en mi menú?

daniel28 · 15 Jul 2014

Aguien me explica como lograr hacer este menú?

( de la web astroanime.net en el pie de pagina)

probé con ralentizar la transición del :hover pero no lo logre, estuve buscando en Internet durante horas
pero no he encontrado nada referente a algo asi.

si alguien es tan amable de explicar como se logra estaría muy agradecido.

::Edito ya lo conseguí, ya no me hace falta la ayuda

Simio · 15 Jul 2014

Solo consiguete el mismo Theme y te quedara así.

HostingFront · 15 Jul 2014

Hola Daniel,

La página parece estar usando el theme de wordpress que se llama Gonzo, aqui te dejo una URL WordPress - Gonzo - Clean, Responsive WP Magazine | ThemeForest

Saludos

zero777 · 15 Jul 2014

muchas gracias tal vez usa este mismo theme =)

daniel28 · 15 Jul 2014

Yo lo que quiero lograr hacer el menu para un menu de un script propio en php puro, nada que ver con WP

tronx · 15 Jul 2014

Ese efecto es muy fácil de conseguir, tienes que utilizar la propiedad (transition) que tiene css3.

katzuphp · 15 Jul 2014

fácil buscando lo web y usando el theme o pillandolo para ti..

johanso · 15 Jul 2014

Amigo, son enlaces con propiedad: inline-block; y estilos de relleno, osea son elementos en lineas que se muestran como bloques y se les pueden aplicar los estilos que reciben los elementos en bloque.
Es muy fácil.
:encouragement:

rayado86 · 15 Jul 2014

En el hover del elemento haces un transition, por ejemplo

Insertar CODE, HTML o PHP:

a:hover {
  background: blue;
  transition: all 1s;
}

La propiedad transition les da efecto a todas las propiedades que le indiques y el tiempo.

jcdiaz · 15 Jul 2014

asi es, todo parece indicar que es un transition de CSS, no necesitas buscar ninguna plantilla de WP

RafaG · 18 Jul 2014

Hola, prueba con esto:

Insertar CODE, HTML o PHP:

.menu a{
    display: inline-block;
    float: left;
    padding: 5px;
    margin: 1px;
    background-color: #333333;
    color: #AAAAAA;
    font-family: Arial, sans-serif;
    size:0.5em;
    text-decoration: none;
    
    -webkit-transition: color 1s,background-color 1s;
    -moz-transition: color 1s,background-color 1s;
    transition: color 1s,background-color 1s;
}

.menu a:hover{
    background-color: #21C0E8;
    color:white;
    
    -webkit-transition: color 0.1s,background-color 0s;
    -moz-transition: color 0.1s,background-color 0s;
    transition: color 0.1s,background-color 0s;
}

Aquí lo tienes funcionando: Edit fiddle - JSFiddle

Un saludo.

Porelian · 22 Jul 2014

con la propiedad transition te sale rapido y sin gastar tiempo inventando la polvora

. Sino puedes buscar algo mas elaborado pero te llevara mas tiempo

andres08 · 2014-08-14T22:17:24-0500

Amigo haz esto:

Al la etiqueta div dale esta propiedad:

transition: 1s all ease-in

a la etiqueta div:hover
dale
transition: 1s all ease-out (tambien cambiale el background) saludos"