Lección 16: 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);
}
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%);
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Te ayudo?
- 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
- 2 cafés: Respondo a una duda en los comentarios.
- 4 cafés: Te corrijo una actividad y te envío feedback.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios