JMiur [E]

Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.

leer artículo actualizado

votar

8 comentarios:

Unknown  

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

Responder
Juansi Rocket  

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 Castañeda  

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 ...

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 ...

Suscribirse a los comentarios
 
CERRAR