CSS でのフィルタープロパティの使用に関する詳細な説明

フィルター属性は要素の視覚効果を定義します

ぼかし

画像にガウスぼかしを適用します。「半径」の値は、ガウス関数の標準偏差、つまり画面上のピクセルがいくつブレンドされるかを設定するため、値が大きいほどぼやけが大きくなります。
値が設定されていない場合、デフォルトは 0 です。このパラメータは CSS の長さの値を設定できますが、パーセンテージ値は受け入れません。

輝度

画像に線形乗算を適用し、画像を明るくしたり暗くしたりします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。その他の値は線形乗数効果に対応します。 100%を超える値も可能で、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 になります。

コントラ

画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。値は 100% を超える場合があり、その場合はより低いコントラストが使用されます。値が設定されていない場合、デフォルトは 1 になります。

グレーケール

画像をグレースケールに変換します。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。 0% から 100% までの値は効果の線形乗数です。設定されていない場合、値はデフォルトで 0 になります。

色相回転

画像に色相回転を適用します。「角度」の値は、画像が調整されるカラーホイールの角度を設定します。値が 0deg の場合、画像は変更されません。値が設定されていない場合、デフォルト値は 0deg になります。この値に最大値はありませんが、360 度を超えるともう一周するのと同じになります。

インバー

入力画像を反転します。値は変換のスケールを定義します。値が 100% の場合は完全に反転します。値が 0% の場合、画像は変更されません。 0% から 100% までの値は効果の線形乗数です。値が設定されていない場合は、デフォルトで 0 になります。

不透明度

画像の透明度を変換します。値は変換のスケールを定義します。値が 0% の場合は完全に透明になり、値が 100% の場合は画像は変更されません。 0% から 100% までの値は効果の線形乗数であり、画像サンプルに量を掛けることに相当します。値が設定されていない場合は、デフォルトで 1 になります。この機能は既存の不透明度プロパティと非常に似ていますが、一部のブラウザではパフォーマンスを向上させるためにフィルターを通じてハードウェアアクセラレーションが提供される点が異なります。

飽和する

画像の彩度を変換します。値は変換のスケールを定義します。値が 0% の場合、彩度は完全に低下しますが、値が 100% の場合、画像は変化しません。その他の値の場合、それらは効果の線形乗数です。 100% を超える値が許可され、より高い彩度が得られます。値が設定されていない場合は、デフォルトで 1 になります。

セピア

画像をセピア色に変換します。値は変換のスケールを定義します。値が 100% の場合、完全にセピア色になり、値が 0% の場合、画像は変更されません。 0% から 100% までの値は効果の線形乗数です。設定されていない場合、値はデフォルトで 0 になります。

ドロップシャドウ

画像に影効果を設定します。影は画像の下に合成され、ぼかすことができ、特定の色でペイントできるマスクのオフセットバージョンです。この関数は、<shadow> タイプ（CSS3 背景で定義）の値を受け入れますが、「inset」キーワードは使用できません。この機能は既存の box-shadow プロパティと非常によく似ていますが、違いは、フィルターを通じて、一部のブラウザがパフォーマンスを向上させるためにハードウェアアクセラレーションを提供することです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
</head>
<スタイル>
    体 {
        背景色: #000;
        色: スカイブルー;
    }
    div {
        境界線: 1px 実線 #fff;
        パディング: 10px;
        幅: 610ピクセル;
        マージン: 10px;
    }
    .ぼかし1 {
        フィルター: ぼかし(0.4px);
    }

    .ぼかし2 {
        フィルター: ぼかし(1px);
    }

    .blur3 {
        フィルター: ぼかし(4px);
    }

    .明るさ1 {
        フィルター: 明るさ(0.30);
    }

    .明るさ2 {
        フィルター: 明るさ(0.8);
    }

    .明るさ3 {
        フィルター: 明るさ(1);
    }

    .コントラスト1 {
        フィルター:コントラスト(10%);
    }

    .コントラスト2 {
        フィルター:コントラスト(50%);
    }

    .コントラスト3 {
        フィルター:コントラスト(100%);
    }

    .グレースケール1 {
        フィルター: グレースケール(10%)
    }

    .グレースケール2 {
        フィルター: グレースケール(50%)
    }

    .グレースケール3 {
        フィルター: グレースケール(100%)
    }

    .huerotate1 {
        フィルター: 色相回転(0度);
    }

    .huerotate2 {
        フィルター: 色相回転(90度);
    }

    .huerotate3 {
        フィルター: 色相回転(180度);
    }

    .invert1 {
        フィルター: 反転(20%)
    }

    .invert2 {
        フィルター: 反転(60%)
    }

    .invert3 {
        フィルター: 反転(100%);
    }

    .不透明度1 {
        フィルター: 不透明度(10%)
    }

    .不透明度2 {
        フィルター: 不透明度(80%)
    }

    .不透明度3 {
        フィルター: 不透明度(100%);
    }

    .飽和1 {
        フィルター: 飽和(0.2);
    }

    .saturate2 {
        フィルター: 飽和(0.6);
    }

    .saturate3 {
        フィルター: 飽和(1);
    }

    .セピア1 {
        フィルター：セピア（10％）
    }

    .セピア2 {
        フィルター：セピア（60％）
    }

    .セピア3 {
        フィルター: セピア(100%)
    }

    .shadow1 {
        フィルター: ドロップシャドウ(2px 2px 2px 赤);
    }

    .shadow2 {
        フィルター: ドロップシャドウ(8px 8px 1px 紫);
    }

    .shadow3 {
        フィルター: ドロップシャドウ(1px 1px 10px ホットピンク);
    }
</スタイル>

<本文>
    <div class="filter1">
        <p>画像にガウスぼかしを描画します。値が大きいほど、ぼやけが強くなります。</p>
        <ul>
            <li class="blur1">ぼかし</li>
            <li class="blur2">ぼかし</li>
            <li class="blur3">ぼかし</li>
        </ul>
    </div>
    <div class="filter2">
        <p>画像に線形乗算を適用して、画像を明るくしたり暗くしたりします。値が 0 の場合、画像は完全に黒くなり、値が 100% を超えると画像は明るくなります</p>
        <ul>
            <li class="brightness1">明るさ</li>
            <li class="brightness2">明るさ</li>
            <li class="brightness3">明るさ</li>
        </ul>
    </div>
    <div class="filter3">
        <p>画像のコントラストを調整します。値が 0 の場合、画像は完全に黒になります。値が 100% を超えると、コントラストはさらに低くなります</p>
        <ul>
            <li class="contrast1">コントラスト</li>
            <li class="contrast2">コントラスト</li>
            <li class="contrast3">コントラスト</li>
        </ul>
    </div>
    <!-- <div class="filter4">
        <p>ぼかし</p>
        <ul>
            <li class="blur1">ぼかし</li>
            <li class="blur2">ぼかし</li>
            <li class="blur3">ぼかし</li>
        </ul>
    </div> -->
    <div class="filter5">
        <p>画像はグレースケールに変換されます。値が 0 の場合、画像に変更はありません。値が 100% の場合、完全にグレースケールに変換されます。</p>
        <ul>
            <li class="grayscale1">グレースケール</li>
            <li class="grayscale2">グレースケール</li>
            <li class="grayscale3">グレースケール</li>
        </ul>
    </div>
    <div class="filter6">
        <p>画像に色相回転を適用します。値が 0deg の場合、画像は変化しません。最大値はなく、360deg を超えると、もう一度一周するのと同じです。</p>
        <ul>
            <li class="huerotate1">huerotate</li>
            <li class="huerotate2">ヒューロテート</li>
            <li class="huerotate3">ヒューロテート</li>
        </ul>
    </div>
    <div class="filter7">
        <p>入力画像を反転します。 0% は画像に変更がないことを意味し、100% は画像が完全に反転していることを意味します</p>
        <ul>
            <li class="invert1">反転</li>
            <li class="invert2">反転</li>
            <li class="invert3">反転</li>
        </ul>
    </div>
    <div class="filter8">
        <p>画像の透明度を反転します。 0% 完全に透明、100% 画像変更なし</p>
        <ul>
            <li class="opacity1">不透明度</li>
            <li class="opacity2">不透明度</li>
            <li class="opacity3">不透明度</li>
        </ul>
    </div>
    <div class="filter9">
        <p>画像の彩度を変換します。 0% 完全に不飽和; 100% 完全に飽和</p>
        <ul>
            <li class="saturate1">飽和させる</li>
            <li class="saturate2">飽和させる</li>
            <li class="saturate3">飽和させる</li>
        </ul>
    </div>
    <div class="filter10">
        <p>画像がセピア色に変換されます。値が 100% の場合は濃い茶色、値が 0% の場合は画像に変化はありません</p>
        <ul>
            <li class="sepia1">セピア</li>
            <li class="sepia2">セピア</li>
            <li class="sepia3">セピア</li>
        </ul>
    </div>
    <div class="filter11">
        <p>画像設定の影の効果</p>
        <ul>
            <li class="shadow1">影</li>
            <li class="shadow2">影</li>
            <li class="shadow3">影</li>
        </ul>
    </div>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: 一意の注文番号を生成するためのMySQLの高同時実行方法

>>: HTML チュートリアル: title 属性と alt 属性