Efecto de borde sombra en hover de un div con CSS3 y transition

zero477

Gamma

SEO

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

• 11 Dic 2015

• #1

Hola a todos,

Me gusta el efecto que sucede cuando pasas el mouse por un div y aparece un borde tipo sombra alrededor del div. Creo que tiene que er algo con transition y CSS3.

¿Alguien sabe de eso?

Saludos,
Eddie

 

estudiseno

Eta

Verificación en dos pasos activada

• 11 Dic 2015

• #2

Le asignas una clase en css3 y después lo usas asi: clase:hover {estilo;}

Saludos.

 

E

elii01

Delta

Programador

Verificación en dos pasos activada

• 13 Dic 2015

• #3

[MENTION=13642]zero477[/MENTION]

HTML:

.nombredeldiv:hover{
box-shadow: 1px 1px 3px #bbb;
}

El primer valor corresponde al eje X, el segundo al eje Y, el tercero a que tan difusa quieres la sombra (a mayor el numero, mas difusa) y el último, es el color de la sombra.

 

L

lucasm

Gamma

Programador

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

• 21 Dic 2015

• #4

Mediante la pseudo-clase hover.

Insertar CODE, HTML o PHP:

elemento:hover {
box-shadow: X Y Z color;
}

X e Y son los ejes ya sea pixeles, em, rem, etc. Z la difuminación.

 

OLMID

Gamma

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

• 3 Ene 2016

• #5

eso se hace de la siguiente forma

HTML:

div{
box-shadow:0;
transition: 1s ;
}
div:hover{
box-shadow: 0 0 5px #000;
}

Con eso tendrá un efecto de transición al poner y quitar el puntero

saludos 🙂

 

ramifenili

Eta

Diseñador

Verificación en dos pasos activada

• 3 Ene 2016

• #6

¿Algo así decís? https://jsfiddle.net/3k2z3sdz/

 

condor285

Beta

Programador

Verificación en dos pasos activada

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

• 6 Mar 2016

• #7

div{
box-shadow: 0;
-webkit-transition: box-shadow 0.8s ease-out;
-moz-transition: box-shadow 0.8s ease-out;
-o-transition: box-shadow 0.8s ease-out;
}
div:hover{
-webkit-box-shadow: 4px 4px 36px 0px rgba(0,0,0,0.82);
-moz-box-shadow: 4px 4px 36px 0px rgba(0,0,0,0.82);
box-shadow: 4px 4px 36px 0px rgba(0,0,0,0.82);
}