Inicio > Desarrollo Web > Tutoriales de CSS > Cómo aplicar filtros a imágenes con la propiedad filter en CSS

Cómo aplicar filtros a imágenes con la propiedad filter en CSS

Diego Cortés
Diego Cortés
September 28, 2024
Cómo aplicar filtros a imágenes con la propiedad filter en CSS

Los filtros CSS son una herramienta poderosa que te permiten modificar la apariencia de las imágenes en tu sitio web. A través de la propiedad filter, puedes aplicar efectos de estilo como desenfoque, brillo, contraste, y más. En este artículo, exploraremos cómo utilizar la propiedad filter en CSS de manera efectiva, para que puedas mejorar tus proyectos web.

¿Qué es la propiedad filter en CSS?

La propiedad filter en CSS permite aplicar efectos visuales a los elementos de una página web, como imágenes, vídeos y otros elementos gráficos. Esta propiedad es compatible con la mayoría de los navegadores modernos y te brinda una forma sencilla de añadir efectos visuales sin necesidad de herramientas externas o aplicaciones de edición de imágenes.

Sintaxis de la propiedad filter

La sintaxis básica de la propiedad filter es la siguiente:

selector {
    filter: filter-function(value);
}

Donde filter-function puede ser una de las diferentes funciones de filtro disponibles y value es el valor que le asignas.

Efectos de filtro más comunes

A continuación, analizaremos algunos de los efectos de filtro más comunes que puedes aplicar a imágenes con la propiedad filter.

1. Desenfoque (blur)

El efecto de desenfoque hace que la imagen parezca más difusa, lo que puede ser útil para crear un fondo suave o dirigir la atención a otros elementos de la página.

img {
    filter: blur(5px);
}

2. Brillo (brightness)

La función brightness() permite ajustar la luminosidad de la imagen. Un valor menor a 1 oscurece la imagen, mientras que un valor mayor a 1 la aclara.

img {
    filter: brightness(1.5);
}

3. Contraste (contrast)

El contraste ajusta la diferencia entre las áreas claras y oscuras de una imagen. Similar a brightness, un valor menor a 1 reduce el contraste, mientras que un valor superior lo aumenta.

img {
    filter: contrast(200%);
}

4. Escala de grises (grayscale)

La función grayscale() convierte la imagen a escala de grises. Un valor de 100% produce una imagen completamente en blanco y negro.

img {
    filter: grayscale(100%);
}

5. Sepia

El filtro sepia() aplica un tono marrón a la imagen, dándole un aspecto vintage.

img {
    filter: sepia(100%);
}

Combinando múltiples filtros

Puedes aplicar varios filtros a una misma imagen combinándolos en la propiedad filter. Es importante recordar que el orden en el que los apliques puede afectar el resultado final.

img {
    filter: brightness(1.2) contrast(1.5) sepia(0.5);
}

Ejemplo práctico

A continuación, se muestra un ejemplo práctico de cómo aplicar diferentes filtros a una galería de imágenes utilizando HTML y CSS.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filtros de Imagen con CSS</title>
    <style>
        img {
            width: 300px;
            height: auto;
            margin: 10px;
            transition: filter 0.5s;
        }

        img:hover {
            filter: brightness(1.2) contrast(1.3) blur(2px);
        }
    </style>
</head>
<body>
    <h1>Galería de Imágenes</h1>
    <img src="imagen1.jpg" alt="Imagen 1">
    <img src="imagen2.jpg" alt="Imagen 2">
    <img src="imagen3.jpg" alt="Imagen 3">
</body>
</html>

Conclusiones

La propiedad filter de CSS te permite aplicar una amplia variedad de efectos visuales a tus imágenes de manera sencilla y efectiva. Desde desenfoques hasta ajustes de brillo y contraste, los filtros pueden enriquecer la experiencia del usuario en tu sitio web. No olvides considerar las mejores prácticas de SEO al trabajar con imágenes para asegurar un mejor rendimiento en los motores de búsqueda. ¡Empieza a experimentar con los filtros en tu próximo proyecto y transforma tus imágenes!

Diego Cortés
Diego Cortés
Full Stack Developer, SEO Specialist with Expertise in Laravel & Vue.js and 3D Generalist

Categorías

Page loaded in 28.09 ms