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

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

最近、イントラネットポータルを修正していたときに、フィルターを使用する必要がある箇所に遭遇しました。最初は 2 つの画像を使用していました。マウスを背景の上に置くと、グラデーションになり、アイコンが切り替わりました。しかし、背景にアイコンを設定した後、マウスを上に置いたときにアイコンが正常に切り替わらなくなりました。そこで、フィルター効果を使用して対処することを考えました。そこで、よく使われるフィルター効果もいくつか学びました。

フィルターを使用する:

序文

CSS3 のフィルター プロパティは、Photoshop と同様の方法で Web ページ上の画像を処理できます。

ブラウザのサポート: IE ブラウザのみがフィルター属性をサポートしていません。Safari および Google ブラウザの下位バージョンと互換性を持たせるには、プレフィックス -webkit- を追加する必要があります。

共通プロパティ

使用する構文:

フィルター: なし | ぼかし() | 明るさ() | コントラスト() | ドロップシャドウ() | グレースケール() | 色相回転() | 反転() | 不透明度() | 彩度() | セピア() | url();

CSS フィルターは、 filter: contrast(150%) brightness(1.5) のように、同じ要素に対して複数のフィルターを同時に定義できますが、フィルターを異なる順序で適用することで生成される効果も異なります。

デフォルト値は: 初期値

継承は親から継承することを意味します。

注: フィルターは通常、パーセンテージ (75% など) で表されますが、小数 (0.75 など) で表すこともできます。

普通

フィルターが追加されていません

<div データフィルター="画像通常">
 <h2>通常</h2>
 <img src="1.jpg">
</div>

グレースケール

画像をグレースケールに変換します。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。設定されていない場合、値はデフォルトで 0 になります。 0 から 1 までの小数点も書くことができます。

<div データフィルター="画像グレースケール">
 <h2>グレースケール</h2>
 <img src="1.jpg">
</div>


//値は0から1までの小数で、grayscale(0)は元の画像を意味し、grayscale(1)は完全にグレーになることを意味します。
[データフィルター=画像グレースケール] 画像 {
  フィルター: グレースケール(50%)
  -webkit-filter: grayscale(50%); /* Chrome、Safari、Opera */
}

飽和する

値が 0 の場合、白黒で表示されます。値が 0.5 の場合、彩度は元の画像の半分になります。値が 1 の場合、彩度は元の画像と同じになります。値が 1 より大きい場合、彩度が強化されていることを意味します。

// (値は 0 から 1 までの小数です)
<div データフィルター="画像飽和">
 <h2>飽和させる</h2>
 <img src="1.jpg">
</div>

彩度は色の濃度(純度)の定義です。彩度: 写真の色の鮮やかさと深さ。

[データフィルター=画像飽和] 画像 {
  フィルター: 飽和(360%)
  -webkit-filter:saturate(360%); /* Chrome、Safari、Opera */
}

セピアタン

0 は茶色の度合いが 0% であることを意味し、元の画像が表示されます。1 は茶色の度合いが 100% であることを意味し、茶色が表示されます。

<div データフィルター="画像セピア">
 <h2>セピア</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像セピア] 画像 {
  フィルター: セピア(100%)
  -webkit-filter: セピア(100%); /* Chrome、Safari、Opera */
}

反転する

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

<div データフィルター="画像反転">
 <h2>反転</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像反転] 画像 {
  フィルター: 反転(100%);
  -webkit-filter: invert(100%); /* Chrome、Safari、Opera */
}

不透明度

画像の透明度。値が 0% の場合は完全に透明になり、値が 100% の場合は画像は変更されません。 0~100% は部分的に透明です。 % の代わりに 0 から 1 までの小数を使用することもできます。これは既存の不透明度プロパティと非常によく似ていますが、一部のブラウザではパフォーマンスを向上させるためにフィルターを通じてハードウェア アクセラレーションが提供される点が異なります。

<div データフィルター="画像の不透明度">
 <h2>不透明度</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像の不透明度] 画像 {
  フィルター: 不透明度(50%)
  -webkit-filter: 不透明度(50%); /* Chrome、Safari、Opera */
}

輝度

画像を明るくしたり暗くしたりします。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。値が 100% を超えると、画像が以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 になります。パーセンテージまたは小数のいずれかを使用できます。

<div データフィルター="画像の明るさ">
 <h2>明るさ</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像の明るさ] 画像 {
  フィルター:明るさ(120%)
  -webkit-filter: 明るさ(120%); /* Chrome、Safari、Opera */
}

対比

画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。 100% を超える値は、より低いコントラストが使用されることを意味します。値が設定されていない場合、デフォルトは 1 になります。パーセンテージまたは小数のいずれかを使用できます。 コントラストは、画像の明るさと暗さの度合いを定義します。コントラストとは、写真の明暗のレベルを指します。

<div データフィルター="画像コントラスト">
 <h2>コントラスト</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像コントラスト] 画像 {
  フィルター:コントラスト(160%);
  -webkit-filter:contrast(160%); /* Chrome、Safari、Opera */
}

hue-rotate 色相回転

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

<div データフィルター="画像の色相回転">
 <h2>色相回転</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像の色相回転] 画像 {
  フィルター: 色相回転(160度);
  -webkit-filter: hue-rotate(160deg); /* Chrome、Safari、Opera */
}

ぼかし

画像にガウスぼかしを適用します。値が大きいほど、ぼやけが強くなります。デフォルト値は 0 で、ぼやけないことを意味します。

<div データフィルター="画像のぼかし">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>


[データフィルター=画像ぼかし] 画像 {
  フィルター: ぼかし(2px);
  -webkit-filter: blur(2px); /* Chrome、Safari、Opera */
}

ドロップシャドウ

box-shadowプロパティと非常によく似ていますが、違いは、フィルターを使用すると、一部のブラウザがパフォーマンスを向上させるためにハードウェア アクセラレーションを提供する場合があることです。

<div データフィルター="ドロップシャドウ">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>

[データフィルター=ドロップシャドウ] 画像 {
  フィルター: ドロップシャドウ(16px 16px 20px 青);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome、Safari、Opera */
}

box-shadowとの比較

影のプロパティを追加します。

<div データフィルター="ボックスシャドウ">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>

/* 影の効果を追加 */
[データフィルター=ボックスシャドウ] 画像 {
  ボックスの影:16px 16px 20px 青;
  -webkit-filter:box-shadow:16px 16px 20px blue; /* Chrome、Safari、Opera */
}

box-shadow と drop-shadow には違いがあります。効果の点では、box-shadow は画像全体に影を付けますが、drop-shadow は不透明な部分のみに影を付けます。

複数のフィルター効果

<div データフィルター="複数のフィルター">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>

/*ボタンと画像の明るさとコントラストを調整します*/
[データフィルター=複数フィルター] 画像 {
   フィルター: コントラスト(175%) 明るさ(3%)
   -webkit-filter: コントラスト(175%) 明るさ(3%); /* Chrome、Safari、Opera */
}

融合効果

/*ぼかしとコントラストを混ぜて融合効果を生み出す*/
.フィルターミックス{
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    幅: 300ピクセル;
    高さ: 200px;
    フィルター:コントラスト(20);
    背景: #fff;
}
.filter-mix::before {
    コンテンツ: "";
    位置: 絶対;
    幅: 120ピクセル;
    高さ: 120px;
    境界線の半径: 50%;
    背景: #333;
    上: 40px;
    左: 40px;
    zインデックス: 2;
    フィルター: ぼかし(6px);
    ボックスのサイズ: 境界線ボックス;
    アニメーション: filterBallMove 4s easy-out infinite;
}

.filter-mix::after {
    コンテンツ: "";
    位置: 絶対;
    幅: 80ピクセル;
    高さ: 80px;
    境界線の半径: 50%;
    背景: #3F51B5;
    上: 60px;
    右: 40px;
    zインデックス: 2;
    フィルター: ぼかし(6px);
    アニメーション: filterBallMove2 4s easy-out infinite;
}

@keyframes フィルターボール移動 {
    50% {
        左: 140px;
    }
}

@keyframes フィルターボール移動2 {
    50% {
        右: 140px;
    }
}

火の効果

フィルター: コントラスト() は、フィルター: ブラー() およびアニメーションと組み合わせて使用​​され、炎の効果を作成します。

フィルター: ぼかし(20px) コントラスト(30);

アニメーション: 2 秒無限移動、0.2 秒線形移動。

SCSS フィルター スタイル

$フィルター: (
 grayscale: '(50%)', // グレースケール saturate: '(360%)', // 彩度 sepia: '(100%)', // セピア invert: '(100%)', // 不透明度: '(50%)', // 明度: '(120%)', // コントラスト: '(160%)', // 色相回転:​​ '(160deg)', // ぼかし: '(2px)', // ドロップシャドウ: 'drop-shadow(16px 16px 20px blue)', // 影);

@each $type、$filters 内の $value {
 [データフィルター="画像-#{$type}"] {
  画像 {
       フィルター: #{$type}#{$value};
  }
 }
}

要約する

CSS3 のフィルター プロパティの詳細な使用法に関するこの記事はこれで終わりです。CSS3 フィルターに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

>>:  htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

推薦する

MySQLのスケジュールタスクが正常に実行できない原因の分析と解決

目次序文原因分析と解決策スケジュールされたタスクを迅速に実行する要約する序文データベースのスケジュー...

JavaScript イベント キャプチャ バブリングとキャプチャの詳細

目次1. イベントの流れ1. コンセプト2. DOMイベントフロー2. イベントの委任1. イベント...

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

HTML でスタイルを使用して属性を追加する例

必要なリンクにインライン スタイルを追加します。コードをコピーコードは次のとおりです。 <a ...

CSS3 フィルター (フィルタ) ウェブページのグレーまたは黒モードのサンプルコードを実現

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

MySQL 8.0.18 のインストールと設定のグラフィックチュートリアル

学習目標: Windowsシステムを使用してMySQLデータベースをインストールする方法を学びます。...

mysql 8.0.18 mgr のインストールと切り替え機能

1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...

マウスのドラッグ効果を実現するJavaScript

この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

仮想マシンの複製に関するVirtual Boxチュートリアル図

VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...

Zabbix redis 自動ポート検出スクリプトは json 形式を返します

自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...

Vueのウォッチリスナーの使い方を説明する記事

目次リスナーウォッチ形式リスナーを設定します。要約するリスナーウォッチ関数名は、リッスンする要素の名...

MySQL 8.0 アトミック DDL 構文の詳細な説明

目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...

React Routerの歴史について簡単に説明します

React Router を理解したいなら、まず歴史を理解する必要があります。より具体的には、Rea...