Bộ lọc CSS

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 22 trên 43.

Bộ lọc giúp bạn thay đổi hình ảnh, hình nền và cả văn bản bằng các hiệu ứng thú vị. Cũng giống như đeo kính râm, bật đèn chiếu sáng hoặc chuyển sang chế độ đen trắng, tất cả chỉ cần một dòng CSS.

1. Làm mờ (px) : Khiến phần tử trông mềm mại và mất nét.

img {
  filter: blur(5px);
}
//slightly out of focus

2. Độ sáng(%): Điều chỉnh độ sáng hoặc tối của một đối tượng.

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. Thang độ xám (%): Chuyển màu thành đen trắng.

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%): Thêm tông màu nâu ấm, tạo cảm giác ảnh hoài cổ.

img {
  filter: sepia(70%);
}
//like an old photo album.

Bạn có thể thử nghiệm thêm nhiều bộ lọc khác! Cứ thoải mái khám phá và xem bạn có thể tạo ra những hiệu ứng sáng tạo nào.

Thử thách

Dễ

Bạn có bốn hình ảnh trong một thư viện ảnh. Thử thách của bạn là áp dụng các bộ lọc sau cho từng hình ảnh:

Hình ảnh thứ nhất (làm mờ): Áp dụng bộ lọc blur(3px) để hình ảnh trông mềm mại và mất nét.
Hình ảnh thứ hai (độ sáng): Dùng brightness(2.0) để làm hình ảnh sáng hơn.
Hình ảnh thứ ba (thang độ xám): Áp dụng grayscale(100%) để chuyển hình ảnh thành đen trắng.
Hình ảnh thứ tư (màu nâu đỏ): Dùng sepia(70%) để tạo cho hình ảnh tông màu ấm, cổ điển.

Mỗi hình ảnh nằm bên trong một thẻ bao <div> có tên lớp tương ứng với bộ lọc (blur, brightness, grayscale, sepia). Chọn hình ảnh bằng bộ chọn phần tử con cháu, chẳng hạn .blur img { filter: blur(3px); }, rồi viết một quy tắc cho mỗi hình ảnh.

Tự làm thử

<!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>