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

D

daniel28

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Jul 2014

• #1

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

 

Última edición: 15 Jul 2014

Simio

Zeta

Verificación en dos pasos activada

• 15 Jul 2014

• #2

Solo consiguete el mismo Theme y te quedara así.

 

H

HostingFront

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Jul 2014

• #3

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

 

Z

zero777

Lambda

• 15 Jul 2014

• #4

muchas gracias tal vez usa este mismo theme =)

 

D

daniel28

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Jul 2014

• #5

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

 

tronx

Gamma

Verificación en dos pasos activada

• 15 Jul 2014

• #6

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

 

K

katzuphp

Beta

Programador

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Jul 2014

• #7

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

 

johanso

Gamma

SEO

Verificación en dos pasos activada

• 15 Jul 2014

• #8

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

Gamma

• 15 Jul 2014

• #9

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.

 

J

jcdiaz

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 15 Jul 2014

• #10

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

 

R

RafaG

Curioso

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 18 Jul 2014

• #11

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

Beta

Programador

Verificación en dos pasos activada

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 22 Jul 2014

• #12

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

 

A

andres08

Beta

Social Media

No recomendado

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 14 Ago 2014

• #13

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"