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

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 属性

推薦する

HTML リスト タグ dl、ul、ol の使用例

コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...

Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...

And キーワードを使用した MySQL の複数条件クエリ ステートメント

AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...

MySQL 中断された接続警告ログの分析

序文:場合によっては、MySQL に接続されたセッションが異常終了することが多く、エラー ログに「通...

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...

ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

Mybatisの各SQL文の実行時間の統計

背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...

Apple M1チップにnginxをインストールし、vueプロジェクトをデプロイする詳細な手順

nginx をインストールApple Mac ではインストールに brew を使用します。brew ...

Windows 10 に Linux サブシステムをインストールする 2 つの方法 (画像とテキスト付き)

Windows 10 は Linux サブシステムをサポートするようになり、面倒なデュアル システ...

シェルスクリプトによるDockerコンテナの起動順序の制御の詳細な説明

1. 遭遇した問題分散プロジェクトの展開プロセスでは、サーバーの再起動後にアプリケーション(データベ...

HTML フォーム コントロールの無効な属性の読み取り専用と無効の概要

HTML でフォームの送信を無効にする方法は 2 つあります。 1. コントロールタグにreadon...

JavaScript の知識: コンストラクタも関数である

目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...

Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説

最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...