Filtros CSS

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 22 de 43.

Los filtros te permiten cambiar visualmente imágenes, fondos e incluso texto usando efectos divertidos. Es como ponerse gafas de sol, encender un foco o entrar en el modo blanco y negro; todo con una sola línea de CSS.

1. Blur (px) – Hace que el elemento se vea suave y desenfocado.

img {
  filter: blur(5px);
}
//ligeramente desenfocado

2. Brillo(%) – Controla qué tan claro u oscuro aparece algo.

img {
  filter: brightness(150%);
}
//ilumina como si se encendiera un foco.

3. Grayscale(%) – Convierte el color a blanco y negro.

img {
  filter: grayscale(100%);
}
//efecto clásico vintage o de periódico.

4. Sepia(%) – Añade un tono cálido y amarronado para una estética de foto retro.

img {
  filter: sepia(70%);
}
//como un álbum de fotos antiguo.

¡Hay muchos más filtros con los que puedes experimentar! Siéntete libre de explorarlos y ver qué efectos creativos puedes crear.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Tienes cuatro imágenes en una galería. Tu desafío es aplicar los siguientes filtros a cada imagen:

Primera Imagen (Blur): Aplica un filtro blur(3px) para que la imagen se vea suave y fuera de foco.
Segunda Imagen (Brightness): Usa brightness(2.0) para hacer la imagen más brillante.
Tercera Imagen (Grayscale): Aplica grayscale(100%) para convertir la imagen a blanco y negro.
Cuarta Imagen (Sepia): Usa sepia(70%) para darle a la imagen un tono cálido y vintage.

Hoja de referencia

Los filtros CSS te permiten cambiar visualmente imágenes, fondos y texto utilizando efectos.

Blur (px) – Hace que los elementos se vean suaves y desenfocados:

img {
  filter: blur(5px);
}

Brightness(%) – Controla qué tan claro u oscuro aparece algo:

img {
  filter: brightness(150%);
}

Grayscale(%) – Convierte el color a blanco y negro:

img {
  filter: grayscale(100%);
}

Sepia(%) – Añade un tono cálido y amarronado para un efecto de foto retro:

img {
  filter: sepia(70%);
}

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.