CSS フィルター

CoddyのHTMLジャーニー「CSSマスタリー」セクションの一部。レッスン 22/43。

Filters を使うと、楽しい effect でimages、背景、さらにはテキストの見た目まで変えることができます。サングラスをかけたり、spotlight を点けたり、白黒モードに切り替えたりするようなものです。しかも CSS の 1 行だけで実現できます。

1. blur (px) ：要素をぼかし、ピントが合っていないように見せます。

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

2. Brightness(%)：明るさや暗さの見え方を調整します。

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

3. Grayscale(%)：カラーを白黒に変換します。

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

4. Sepia(%): レトロな photo の雰囲気を出す、暖かみのある茶色がかった色合いを加えます。

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

試してみることのできるフィルターは、ほかにもたくさんあります！ぜひいろいろ試して、どんなクリエイティブな効果を作れるか見てみましょう。

チャレンジ

簡単

Galleryに4枚の画像があります。Challengeは、各画像に次のFiltersを適用することです：

First Image (Blur)：画像を柔らかくしてピントをぼかすために、blur(3px) filterを適用します。
Second Image (Brightness)：画像を明るくするために、brightness(2.0)を使用します。
Third Image (Grayscale)：画像を白黒にするために、grayscale(100%)を適用します。
Fourth Image (Sepia)：画像に暖かくvintageな色調を与えるために、sepia(70%)を使用します。

各画像は、そのfilterにちなんだ名前のclass（blur、brightness、grayscale、sepia）を持つwrapperの中にあります。descendant selectorを使って画像を指定します。たとえば.blur img { filter: blur(3px); }のように記述し、画像ごとに1つのruleを書きます。

自分で試してみよう

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