Lección 19: Filters | Curso CSS

Lección 19: 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

Actividad 1

Muestra una imagen. Cuando el cursor esté por encima añade un filtro que la convierta a escala de grises (blanco y negro).

Actividad 2

Muestra la imagen de un esqueleto. Cuando el cursor esté por encima añade un filtro que la invierta los colores dándole un aspecto de radiografía.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario