Lección 17: Filters

Los filtros nos dan la capacidad de alterar los colores a partir de un algoritmo determinado. Lo podemos aplicar a elementos o imágenes.

Esenciales

Difuminar

.elemento {
  filter: blur(5px);
}

Original

Blur

Brillo

.elemento {
  filter: brightness(2);
}

Original

Brightness

Contraste

.elemento {
  filter: contrast(200%);
}

Original

Contrast

Sombra de la imagen

Solo funciona con SVGs.

posición x, posición y, suavizado y color.

.elemento {
  filter: drop-shadow(30px 10px 4px green);
}

Original

Drop-shadow

Escala de grises o transformar a blanco y negro

.elemento {
  filter: grayscale(100%);
}

Original

Grayscale

Rotación de colores del modelo HSL

.elemento {
  filter: hue-rotate(90deg);
}

hue

Imagen obtenida de Stackoverflow donde también encontrarás una completa explicación.

Original

Hue-rotate

Invertir

.elemento {
  filter: invert(100%);
}

Original

Invert

Transparencia

.elemento {
  filter: opacity(50%);
}

Original

Opacity

Saturación

.elemento {
  filter: saturate(50%);
}

Original

Saturate

Sepia

.elemento {
  filter: sepia(100%);
}

Original

Sepia

Múltiples filtros

filter: contrast(175%) brightness(3%);

Más información

16-1 16-2

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario