JMiur [E]

En un principio, usábamos onmouseover; era simple y práctico pero estaba limitado a los enlaces; más adelante, esta posibilidad se extendió a casi cualquier otra etiqueta y las cosas comenzaron a ser un poco menos estáticas que antes:
<style>
  #dbox {
    background-color: #808991;
    color: #FFF;
  }
  #dbox:hover {
    background-color: #D0D941;
    color: #000;
  }
</style>
<div id="dbox"> onmouseover </div>


onmouseover

Pasaron años para que eso tan simple que es cambiar una serie de propiedades por otras ante cierta acción como poner el cursor encima, se transformara un poco haciendo que ese cambio fuera mostrado de manera pausada, paso por paso, de tal modo de crear un efecto animado que podemos controlar con la propiedad transition así que a eso mismo, basta agregarle:
<style>
  #dbox {
    .......
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
  }
</style>
<div id="dbox"> transition </div>

transition

Como el tiempo se ascelera, la llegada de la versión 5 de Firefox nos lleva a otro nivel ya que incorpora toda una serie de propiedades de animación más sofisticadas, algo que ya podíamos ver en Chrome y Safari.

animation

Así que ahora, no queda más remedio que salir a investigar un poco:

8 comentarios:

Graciela  

jejeje no había actualizado el navegador, ahora sí puedo verlo :D

Responder
JUANSI  

Que interesante, creo que me gustaría aplicarlo a mi blog, pero antes debo resolver otra cosa mas importante (es que quiero comenzar a publicar y algunos problemitas no me dejan:)

Se trata de lo siguiente: Copié del blog de Oloman un efecto de cinta adhesiva para imagenes. En explorer se ve bien; pero en chrome y firefox las letras del post quedan situadas a la derecha de la imagen, como pegadas a ella. Intenté centrar la imagen, pero no tengo conocimiento de HTML ni de CSS ni nada de esoo.. y por mas que he probado, no he logrado centrarla (con eso busco que las letras bajen... mi suposición es que sucedería eso ¿?). ¿Puedes ayudarme JMiur? Si lo hicieras quedaría profundamente agradecido...

P.D.= Lo de la flecha para ir arriba.. decidí dejarla así por un tiempo, en realidad por cansancio. Probé con aplicar ancho variable al blog, pero no conseguí mucho, asi que dejo ese tema congelado... Pero lo de las letras en los posts es algo demasiado notorio :S ...por faboor .. help me.

Responder
Karla  

Me gustan JMiur!, lástima que en IE no funcione;...

...probablemente ya la conozcas, acá en mozilla hay mucho material sobre transiciones, transformaciones, animaciones etc...

https://developer.mozilla.org/es/

Salu2!!

Responder
JMiur  

Juansi:

Eso ocurre porque la imagen flota y no hay ninguna necesidad de que flote. Cuando algo flota, dependiendo de su tamaño, lo que sigue (en este caso el texto), se mostrará al lado y no abajo.

.efectoimg {
margin: 20px 10px auto;
position: relative;
}

A mi juicio, eso, debería cambiarse así:

.efectoimg {
margin: 20px 0;
position: relative;
text-align: center;
}

Y la imagen se mostrará centrada sin molestarse con el texto.

Responder
Adelys Belen  

Buen Efecto, muchas gracias por tus aportes, ahora una pregunta JMiur, este efecto de Fade puedo aplicarlo a imagenes? en tu ejemplo lo haces con background-color, digo esto podria usarse para un backgroun-image?
lo he intentado pero no logro hacerlo :(

Responder
JMiur  

Los efectos se aplican a propiedades y no asus contenidos así que podria hacerse con alguna de ellas como la propeidad opacity. No sé que es l oque quieres hacer con exactitud.

Responder
Adelys Belen  

Ok JMiur, gracias por responder....
El ejemplo que tu citas, se trata de colocar un background-color a un DIV... y al hover un color diferente...
ahora bien, si ese div fuese una imagen "cualquiera" y al hacer hover fuese otra imagen, entonces aplicarle ese efecto fade a un DIV con imagen. y no con background-color

Responder
JMiur  

A un DIV con UNA imagen no porque requieres dos y por l otanto, requieres dos etiquetas, Fíjate en esta entrada donde hay varios ejemplos de como hacer eso con sencillez.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR