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);
}
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 realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios