CSS-фильтры

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 22 из 43.

Фильтры позволяют вам визуально изменять изображения, фоны и даже текст, используя интересные эффекты. Это как надеть солнечные очки, включить прожектор или перейти в черно-белый режим — и все это с помощью одной строки CSS.

1. Размытие (Blur) (px) – Делает элемент мягким и не в фокусе.

img {
  filter: blur(5px);
}
//слегка не в фокусе

2. Brightness(%) – Управляет тем, насколько светлым или темным выглядит объект.

img {
  filter: brightness(150%);
}
//осветляет, словно включили прожектор.

3. Grayscale(%) – Преобразует цвета в черно-белые.

img {
  filter: grayscale(100%);
}
//классический винтажный эффект или эффект газеты.

4. Сепия(%) — добавляет теплый коричневатый оттенок для создания эффекта ретро-фотографии.

img {
  filter: sepia(70%);
}
//как в старом фотоальбоме.

Существует еще много фильтров, с которыми вы можете поэкспериментировать! Не стесняйтесь изучать их и смотреть, какие творческие эффекты вы можете создать.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

У вас есть четыре изображения в галерее. Ваша задача — применить следующие фильтры к каждому изображению:

Первое изображение (Blur): Примените фильтр blur(3px), чтобы сделать изображение мягким и не в фокусе.
Второе изображение (Brightness): Используйте brightness(2.0), чтобы сделать изображение ярче.
Третье изображение (Grayscale): Примените grayscale(100%), чтобы сделать изображение черно-белым.
Четвертое изображение (Sepia): Используйте sepia(70%), чтобы придать изображению теплый винтажный оттенок.

Шпаргалка

CSS-фильтры позволяют визуально изменять изображения, фоны и текст с помощью эффектов.

Blur (px) – делает элементы мягкими и расфокусированными:

img {
  filter: blur(5px);
}

Brightness(%) – управляет тем, насколько светлым или темным выглядит объект:

img {
  filter: brightness(150%);
}

Grayscale(%) – преобразует цвета в черно-белые:

img {
  filter: grayscale(100%);
}

Sepia(%) – добавляет теплый коричневатый тон для создания эффекта ретро-фотографии:

img {
  filter: sepia(70%);
}

Попробуйте сами

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

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.