Lección 18: 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%);
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.
¿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.
- 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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios