Cómo aplicar efectos de fotos a imágenes usando CSS3

Si quieres saber cómo aplicar efectos de fotos a imágenes usando CSS3, te mostramos las instrucciones que tienes que escribir en el archivo CSS de tu proyecto.

efectos de fotos con Css3

En CSS3 es muy fácil aplicar efectos a las imágenes y los vídeos, simulando los que vienen con las aplicaciones de cámaras de fotos en los móviles. Solo se necesita una línea de código para cambiar los valores de las imágenes.

Vas a ver que la línea clave en el archivo CSS3 es la que dice:   -webkit-filter: nombre_del_filtro(valor). Abajo te mostramos el código que se necesita escribir para aplicar el efecto de fotos que nos guste. Puedes copiar las líneas que desees usar en tu CSS con tus imágenes. En este caso usé CodePen para hacer más sencillo el compartir el código:

See the Pen Imágenes con efectos by Bizware (@Fifthtoe) on CodePen.

Ten en cuenta que sí o sí hay que poner el prefijo -webkit- para que los efectos funcionen en los navegadores: Google Chrome, Safari, Firefox, Opera.

Aquí puedes ver el informe del sitio web: caniuse.com, en el que nos muestra el soporte de los navegadores actuales para el método Filter:

CanIUse - Filter

Un dato importante: Puedes combinar los efectos para lograr nuevas presentaciones de las imágenes, acercandote más a lo que se ve en las aplicaciones de las cámaras de fotos digitales o en los móviles.

DevCode HTML5 Y CSS3
Cómo instalar Windows 10 desde un pendrive o USB

TUTORIALES, TRUCOS Y HACKS

NUEVOS POSTS EN PORTADA


¿Que opinas? escribe un comentario :)