El efecto de color gradual jQuery

kraneok #1 Abr '13 Penitente

Resulta que llevo viendo que se ha puesto de moda que al hacer el hover encima de cualquier elemento como un <a>, o una < img> para facebook, o alguno de este tipo, cuando se resalta con otro color mas duro o mas brillante el color va apareciendo, es decir que tiene un timer típico de jQuery.

He estado mirando y se realiza con jQuery color, pero no consigo hacerlo.
Por lo que pido si no es mucho, si alguien conoce como conseguirlo me explique o me pase algún artículo donde se encamine la solución.

Gracias y un saludo.

#2 Bien, voy a buscar información sobre el, ¿ pero como puedo buscarlo ?, ¿ algún nombre concreto del efecto ?. Gracias .

elkaoD #2 Abr '13

#1 eso se puede hacer con animaciones CSS3 si no te importa perder soporte de navegadores viejos (y es mucho más simple/elegante).

1 respuesta

elkaoD #3 Abr '13

#1 busca en google por css3 hover color transition.

1 respuesta

Merkury #4 Abr '13


<elemento>:hover
{
     background: #000;
     /*si quieres degradados*/
     background: #fff;
     background: -o-linear-gradient(top, #000, #fff);
     background: -moz-linear-gradient(top, #000%, #fff 50%);
     background: -webkit-linear-gradient(top, #000 0%, #fff 50%);
     background: -ms-linear-gradient(top, rgb(0,0,8) 15%, rgb(255,255,255) 98%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#fff',GradientType=0 );
}

Ninja edit --> Me acabo de dar cuenta que he puesto los efectos de degradado no de transición XD, pero los de transición son -<tipo>-transition

¿#5 Por el soporte, que soporte? si todos navegadores (incluso IE! para casi todo) es compatible XD

2 respuestas

kraneok #5 Abr '13 Penitente

#3 La verdad que no quería entrar todavía mucho en CSS3 y HTML5 por el tema del soporte. Pero creo que va siendo hora de comenzar a utilizarlo ya que no les queda mucho tiempo de desarrollo.

#4 Pensaba precisamente en IE y su forma de ser... xdddd
Un saludo.

1 respuesta

Merkury #6 Abr '13

#5

div
{
width:100px;
height:100px;
background:red;

transition:background-color 2s ease-in;
-moz-transition:background-color 2s ease-off; /* Firefox 4 */
-webkit-transition:background-color 2s ease-of; /* Safari and Chrome */
-o-transition:background-color 2s ease-off; /* Opera */
}

div:hover
{

background: black;

}

1 respuesta

kraneok #7 Abr '13 Penitente

#6 Gracias ya lo eché a andar antes, no me fije que en W3School está xD.
Muchas gracias a los dos.

La verdad que CSS3 da una flexibilidad tremenda y un ahorro de código increíble, que alegría.

1 respuesta

Merkury #8 Abr '13

#7 Si la verdad que si XD.

eXtreM3 #9 Abr '13

Sólo soporta el transition IE10, las versiones anteriores de IE no.

#4 IE9 es el compatible con css3, y aún así da un por culo que flipas, hay que hacer bastantes fix.

1 respuesta

Merkury #10 Abr '13

#9 Contando que el css transition es de css3 asumo que nadie (que sepa obviamente) va a pensar que funciona en IE6...

#11 Tio te estas haciendo la picha un lio XD, que te doy la razón, solo que no lo he comentado porque lo primero que sale cuando buscas como hacer un transition es "Esto solo funciona en IE10".

1 1 respuesta

eXtreM3 #11 Abr '13

#10 ¿? No funciona ni en IE9, sólo en el 10, qué es lo que no se entiende de la frase "Sólo soporta el transition IE10, las versiones anteriores de IE no." ?

1 respuesta

El efecto de color gradual jQuery

Usuarios habituales

Tags