Guía Completa de Filtros CSS

Tabla de contenidos

Los filtros CSS proporcionan una forma poderosa de modificar la presentación visual de elementos HTML, ofreciendo una amplia gama de efectos visuales. A continuación, exploraremos los diversos filtros CSS disponibles, junto con ejemplos prácticos de su aplicación.

1. Filtro de Desenfoque (Blur)

El filtro de desenfoque se utiliza para aplicar un efecto de desenfoque a un elemento. Puede especificarse el radio del desenfoque, determinando la intensidad del efecto. Por ejemplo:

Filter blur ejemplo
.elemento-imagen-blur-ejemplo {
  filter: blur(5px);
}

2. Filtro de Brillo (Brightness)

Este filtro ajusta el brillo de un elemento, con 0% representando un negro total y 100% sin cambios en el brillo. Ejemplo:

Filter brightness ejemplo
.elemento-imagen-brightness-ejemplo {
  filter: brightness(150%);
}

3. Filtro de Contraste (Contrast)

El filtro de contraste ajusta el contraste de un elemento, con 0% sin contraste y 100% sin cambios. Ejemplo:

Filter contrast ejemplo
.elemento-imagen-contrast-ejemplo {
  filter: contrast(200%);
}

4. Filtro de Saturación (Saturate)

Este filtro aumenta o disminuye la saturación de un elemento en un porcentaje especificado. Ejemplo:

Filter saturate ejemplo
.elemento-imagen-saturate-ejemplo {
  filter: saturate(200%);
}

5. Filtro de Opacidad (Opacity)

El filtro de opacidad ajusta la transparencia de un elemento, con 0% siendo completamente transparente y 100% sin cambios. Ejemplo:

Filter opacity ejemplo
.elemento-imagen-opacity-ejemplo {
  filter: opacity(50%);
}

6. Filtro de Sepia

El filtro de sepia convierte un elemento a una escala de grises y aplica un efecto sepia. Ejemplo:

Filter Sepia ejemplo
.elemento-imagen-sepia-ejemplo {
  filter: sepia(80%);
}

7. Filtro de Matiz (Hue Rotate)

Este filtro rota el matiz del elemento en grados, lo que cambia los colores. Ejemplo:

Filter Hue-Rotate ejemplo
.elemento-imagen-huerotate-ejemplo {
  filter: hue-rotate(90deg);
}

8. Filtro Drop-Shadow

Este filtro coloca el elemento con una sombra alredor, mayormente usado en imagenes PNG para dar un efecto sombra resaltante muy interesante. Ejemplo:

Goku-super-saiyan-blue-con-filter-drop-shadow ejemplo
.elemento-imagen-dropshadow-ejemplo {
  filter: drop-shadow(0px 0px 27px #0293aa);
}

9. Filtro de Blanco y Negro (Grayscale)

Este filtro coloca el elemento en blanco y negro, útil para hacer efectos hover con fotografías. Ejemplo:

Filter grayscale ejemplo
.elemento-imagen-grayscale-ejemplo {
  filter: grayscale(1);
}

10. Combinación de Filtros

Además de aplicar filtros individuales, es posible combinar múltiples filtros para lograr efectos más complejos. Por ejemplo:

Filter combinacion ejemplo
.elemento-imagen-combinacion-ejemplo {
  filter: blur(5px) brightness(120%) saturate(150%);
}

Con el uso de estos filtros CSS y su combinación efectiva, los desarrolladores web pueden agregar rápidamente efectos visuales atractivos a sus proyectos, mejorando la experiencia del usuario y la apariencia estética del contenido web.

5 2 Votos
Article Rating
Suscribirte
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios