Main menu

8 filtros CSS para imágenes que todo diseñador web debería conocer

En muchas ocasiones cuando un desarrollador o diseñador web lleva a cabo la maquetación de un proyecto, necesita aplicar determinados efectos en algunas imágenes. Vamos a mostrar unos filtros para aplicar los efectos más populares usando únicamente código CSS.

Antes de empezar, hay que tener en cuenta que algunos de estos filtros solo son compatibles con los navegadores Google Chrome y Safari, aunque se prevé que en futuras versiones de los otros navegadores más usados la compatibilidad con los filtros mejorará. De momento es posible aplicar estos filtros en otros navegadores usando SVG.

Esta es la imagen original que vamos a usar para los ejemplos:

Imagen original

Recorte de la imagen original de Dylan Baist-Bliss

Efecto de desenfoque: tendremos que indicar un número de píxeles, proporcional a la intensidad del efecto.

.mi-imagen {
-webkit-filter: blur(3px);
filter: blur(3px);
}

Filtro blur

Escala de grises: indicaremos el porcentaje de decoloración.

.mi-imagen {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Filtro grayscale

Invertir: invierte el color, la saturación y el brillo. Indicaremos el porcentaje de aplicación.

.mi-imagen {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Filtro invert

Tono sepia: indicaremos un porcentaje de aplicación del típico efecto “vintage”.

.mi-imagen {
-webkit-filter: sepia(100%);
}

Filtro sepia

Rotando el color: ¿te imaginabas poder rotar el color de la imagen unos cuantos grados? Pues sí se puede, indicando los grados a rotar.

.mi-imagen {
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}

Filtro hue-rotate

Brillo: indicaremos el porcentaje de brillo que queramos darle a la imagen.

.mi-imagen {
-webkit-filter: brightness(50%);
filter: brightness(50%);
}

Filtro brightness

Contraste: igual que en el caso anterior, indicaremos el porcentaje de contraste que nos interese.

.mi-imagen {
-webkit-filter: contrast(200%);
filter: contrast(200%);
}

Filtro contrast

Saturación: este es un efecto bastante popular que sirve para incrementar la saturación de color en imágenes subexpuestas. Indicaremos un porcentaje.

.mi-imagen {
-webkit-filter: saturate(250%);
filter: saturate(250%);
}

Filtro saturate

Aplicando múltiples filtros

Si queremos aplicar más de un filtro de manera simultánea, podemos hacerlo separando los efectos que queramos usar con un espacio. Por ejemplo:

.mi-imagen {
-webkit-filter: saturate(150%) hue-rotate(45deg) blur(1px);
filter: saturate(150%) hue-rotate(45deg) blur(1px);
}

Múltiples filtros

¿Simple verdad? Si tienes cualquier duda o conoces algún efecto que no hayamos incluido, puedes dejarnos un comentario. En Endeos disponemos de años de experiencia en el desarrollo y diseño web, no dudes en ponerte en contacto con nosotros si necesitas ayuda.

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Google+ Compartir en Linkedin

1 pingback/trackback

  • Andrés

    ¿Pero esto sirve para todos los navegadores o solo para Chrome y Safari?

    • blogendeos

      Hola Andrés,

      Por el momento estos filtros sirven para:
      – Chrome a partir de versión 31+
      – Safarti a partir de versión 7+
      – Firefox a partir de versión 35+
      – Opera a partir de versión 18+

      Internet Explorer por ahora no es compatible.

      ¡Un saludo!

  • Pingback: Originales efectos hover con CSS3()

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más