Mark
#1

 Hola de nuevo ^^ esta vez les comparto un efecto para im谩genes, le puse de nombre Fotos recogidas por la forma en la que se mantienen las imagenes hasta cuando se aplica el hover y es entonces que vuelven a la precisi贸n que deber铆an de tener para que se puedan ver todas, adem谩s de explicarles como tener el efecto a pedido de un usuario explicare lo que significan unas propiedades ya que el pensaba que yo repet铆a innecesariamente algunas pero no es as铆, mas abajo explico lo que significan, ahora proseguiremos con el efecto

copia y pega el siguiente c贸digo css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente c贸digo

See the Pen Fotos recogidas, efecto con CSS3 - ZKreations by eltorga (@eltorga) on CodePen.

Pega el siguiente c贸digo HTML en donde quieras el efecto:

See the Pen Fotos recogidas, efecto con CSS3 - ZKreations by eltorga (@eltorga) on CodePen.

lo que esta en rojo lo reemplazan por los links de sus imagenes y las "#" por el link que deseen para cada imagen

Explicacion sobre propiedaes en CSS3

Ahora explicare algo que contiene este c贸digo, esta parte es CSS3 y por desgracia este lenguaje aun se interpreta diferente para distintos navegadores.

 El efecto en CSS3 que usamos para esta ocasi贸n es transition y para que los navegadores lo interpreten bien se debe anteponer para cuales va dirigido

-moz = Mozilla Firefox

-ms =  Internet Explorer 8 y 9

 -webkit = Safari y Chrome

-o = Opera


Si nuestra pagina web fuera abierta utilizando Firefox, el navegador ignoraria todo lo que esta escrito menos esta parte

-moz-transition: all 400ms ease;

y es entonces cuando se aplica el efecto que deseamos, lo mismo pasa si nuestra web fuera abierta con Chrome o Safari, esos navegadores ignorarian todas las propiedades a excepci贸n de esta

 -webkit-transition: all 400ms ease;

Entonces si quieres que un efecto en CSS3 sea visto por la mayoria de los navegadores que sea posibles tienes que escribir la propiedad para cada navegador

Volviendo al tema de el efecto de Fotos recogidas, al terminar de agregar todo lo que esta nombrado arriba nos quedar铆a asi:


eso es todo, recuerda que si tienes alguna duda o necesitas ayuda para algo solo dejalo en un comentario =)

image quote pre code
Compartir: