Transformaciones, transiciones y animaciones son cosas que vamos a tener que empezar a estudiar en poco tiempo así que lo mejor es irse preparando.
Si tienen Chrome instalado, aprovechen la oportunidad de mirar los ejemplos que se muestran en Using CSS3 Transitions, Transforms and Animation. Algunos funcionarán con limitaciones en otros navegadores pero nos dará una idea de lo que se viene en cuanto Firefox 4 salga de sus versiones beta e Internet Explorer 9 vea la luz.
Igual, aunque debamos seguir esperando, podemos jugar un poco.
En este ejemplo, hay dos imágenes y basta poner el cursor encima para que permuten, en Chorme con un fade, en Firefox sin efectos y en IE no pasará nada:
Si tienen Chrome instalado, aprovechen la oportunidad de mirar los ejemplos que se muestran en Using CSS3 Transitions, Transforms and Animation. Algunos funcionarán con limitaciones en otros navegadores pero nos dará una idea de lo que se viene en cuanto Firefox 4 salga de sus versiones beta e Internet Explorer 9 vea la luz.
Igual, aunque debamos seguir esperando, podemos jugar un poco.
En este ejemplo, hay dos imágenes y basta poner el cursor encima para que permuten, en Chorme con un fade, en Firefox sin efectos y en IE no pasará nada:
#demoFade {
cursor: pointer;
height: 125px;
margin: 0 auto;
position: relative;
width: 200px;
}
#demoFade img {
position: absolute;
left: 0;
-moz-transition: opacity 1s ease-in-out; /* transición en Firefox 4 */
-webkit-transition: opacity 1s ease-in-out; /* transición en Chrome y Safari */
-o-transition: opacity 1s ease-in-out; /* transición en Opera */
transition: opacity 1s ease-in-out; /* transición según la w3.org */
}
#demoFade img.top:hover {
opacity: 0;
}
<div id="demoFade">
<img src="URL_imagen-1" />
<img class="top" src="URL_imagen-2" />
</div>
Este otro, es similar pero el efecto es de zoom, girando en Chrome, sólo escaládose en Firefox y de nuevo, en IE no pasará nada de nada:
#demoZoom div {
background-color: #000;
border: 3px solid #89A;
cursor: pointer;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 100px;
-moz-transition: all 2s ease-in-out; /* transición en Firefox 4 */
-webkit-transition: all 2s ease-in-out; /* transición en Chrome y Safari */
-o-transition: all 2s ease-in-out; /* transición en Opera */
transition: all 2s ease-in-out; /* transición según la w3.org */
}
#demoZoom div:hover {
-moz-transform:rotate(720deg) scale(2,4); /* transición en Firefox 4 */
-webkit-transform:rotate(720deg) scale(2,4); /* transición en Chrome y Safari */
-o-transform:rotate(720deg) scale(2,4); /* transición en Opera */
}
<div id="demoZoom">
<div class="hover">TEST efecto hover</div>
</div>TEST
efecto hover
efecto hover
Más información:
8 comentarios:
=O
hola, bien en todos estos trucos siempre lo que falta es averiguar para que sirven o eso sus alicaciones practicas ... pero bueno . Yo tengo una preguntita ?y si en lugar por ejemplo de la segunda foto pongo un texto, se puede? o sea quiero poner la tapa de un libro por ejemplo y que al pasar el cursor salga el titulo el autor etc... lo vi en un blog y quedaba muy chulo
gracias al ser de los mil colores por dentro
No particualrmente con este ejemplo, seguramente es posible, si recuerdas donde lo has visto, me fijo.
Si no entiendo mal en el primer ejemplo dices que en Firefox no se muestra y yo si lo veo con Firefox :S
JMiur, habra q esperar el IE9 para probar. Un pregunta fuera de lugar... se puede poner un gadget en un post, especificamnete el de Feeds (5 ultimas entradas)??
Gracias
Lo que quise decir es que en Firefox se verá la transición pero, en Chrome, por ejemplo verás que esa transición es animada. Todas esas propiedades de animación son las que esperamos que sean las que se usará en la nueva versión de Firefox.
Jaime: No, en las entradas no puede ponerse gadgets.
ok, ni modo, gracias otra vez =)
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...