Cómo crear: agregar efectos de imagen

Aprende cómo agregar efectos visuales a las imágenes.

filtros de imagen

Prueba por tu cuenta

Filtros CSS

CSS filter La propiedad agrega efectos visuales a los elementos (como desenfoque y saturación).

Nota:Internet Explorer, Edge 12 o Safari 5.1 y versiones anteriores no son compatibles filter propiedad.

ejemplo de gris

Cambiar el color de todas las imágenes a blanco y negro (100% gris):

Tulip
imagen original
Tulip
gris (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Prueba por tu cuenta

ejemplo de desenfoque

Aplicar efecto de desenfoque a todas las imágenes:

Tulip
imagen original
Tulip
tratamiento de desenfoque (5 píxeles)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Prueba por tu cuenta

Páginas relacionadas

Manual de referencia:Atributo de filtro CSS