ywork2020.com

Title

要素の背後領域にグラフィック効果を指定する

目次 (INDEX)

backdrop-filterとは

ここで説明するbackdrop-filter とは次の語句からなるCSSのプロパティです。
backdrop
読み: バックドロップ
意味: 背景幕
filter
読み: フィルター
意味: ろ過器、こし器

目次に戻る

backdrop-filterプロパティの概要

このプロパティは要素の背後の領域にフィルターを適用します。

フィルターは基本的にフィルター関数を用います。 要素の背後にフィルターを置くので、フィルターの効果を目視するためには要素の背景色は透明か、もしくは透過度を指定している必要があります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{backdrop-filter: フィルター関数}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルのプロパティの適用要素はdiv要素を使用しています。 背景色はrgba関数を使い白色で70%の透過処理を設定しています。

要素の背景色については、 background-color のページを参照していただきますようお願い致します。

初期値: none

初期値のnoneキーワードは要素の背後領域にフィルターを指定しません。

backdrop-filter: none;

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: none;
}

目次に戻る

フィルター関数: blur()

blur関数は、コンテンツにガウスぼかしを適用します。 引数には画素が互いに溶け込むかをピクセル単位で指定することになります。

backdrop-filter: blur(2px);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: blur(2px);
}

目次に戻る

フィルター関数: brightness()

brightness関数を使うと、背後領域の明るさを調整することができます。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0.5 = 50%
  • 1 = 100%
  • 1.5 = 150%
backdrop-filter: brightness(80%);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: brightness(80%);
}

目次に戻る

フィルター関数: contrast()

contrast関数を使うと、コンテンツのコントラストを調整することができます。 コントラストとは画像の最も明るい部分と、最も暗い部分の明暗比のことで、コントラストを抑えると色あせた雰囲気になり、 コントラストを上げると色に艶を感じるようになります。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0.5 = 50%
  • 1 = 100%
  • 1.5 = 150%
backdrop-filter: contrast(150%);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: contrast(150%);
}

目次に戻る

フィルター関数: drop-shadow()

drop-shadow関数を使うと、コンテンツのボックスに、「ずらし」と「指定色でのぼかし」 を加えて影のように表示することができます。

この関数に似たCSSのプロパティとして、 box-shadow がありますが、 こちらはフィルターなので、ブラウザによってはアクセラレーションの働きで画質が向上する場合があります。

backdrop-filter: drop-shadow(5px 5px 5px black);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: drop-shadow(5px 5px 5px black);
}

目次に戻る

フィルター関数: grayscale()

grayscale関数を使うと、コンテンツのカラーをグレースケールに変換します。 グレースケールとは、色の種類と範囲を表す用語の一つで、白と黒とその中間の段階的な灰色のみを用いることを言います。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0 = 0%
  • 0.5 = 50%
  • 1 = 100%
backdrop-filter: grayscale(50%);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: grayscale(50%);
}

目次に戻る

フィルター関数: hue-rotate()

hue-rotate関数を使うと、コンテンツのフィルターカラーを色相環の回転により調整します。

hue
読み: ヒュー
意味: 色相
rotate
読み: ローテート
意味: 回転

色相とは色の要素のうち、彩度と明度を取り除いた残りの要素のことを言います。 そして、色相環を具体的に言うと、色を体系化する際に用いる方法の一つとして色相環(hue circle)という、赤・橙・黄・緑・青・紫の連続的に変化していく円状のカラーパレット のことを言います。

また、引数に定義される値の単位「deg 」とはdegreeの略で、意味としては単位の「度」にあたります。 度とは記号にすると「°」となり、例えば温度とか、角度、経度、緯度などに使われる単位です。

この関数の引数としては、角度として指定することになり、色相環の回転角度を調整する値を定義します。 なお、この値は回転角なので0deg~360degの範囲で定義することになりますが、360degを超えても問題なく、回り込みの値として処理されます。

backdrop-filter: hue-rotate(180deg);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: hue-rotate(180deg);
}

目次に戻る

フィルター関数: invert()

invert関数を使うと、コンテンツの色を反転します。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0 = 0%
  • 0.5 = 50%
  • 1 = 100%
backdrop-filter: invert(10%);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: invert(10%);
}

目次に戻る

フィルター関数: opacity()

opacity関数を使うと、コンテンツの透過度を調整することができます。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0 = 0%
  • 0.5 = 50%
  • 1 = 100%

この関数の引数では0が完全な透明を表し、1が不透明の状態を表します。 このページのサンプルでは既に背景色に透過処理をしていますが、 このサンプルのみbackground-colorの設定を初期値にしていますので純粋にopacity関数の透過処理が反映されています。 効果は線形乗数になります。

backdrop-filter: opacity(80%);

div{
	background-color: transparent;
	backdrop-filter: opacity(80%);
}

目次に戻る

フィルター関数: saturate()

saturate関数を使うと、コンテンツの彩度を調整することができます。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0 = 0%
  • 1 = 100%
  • 1.5 = 150%
backdrop-filter: saturate(170%);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: saturate(170%);
}

目次に戻る

フィルター関数: sepia()

saturate関数を使うと、コンテンツセピア超することができます。

    引数に指定する値は、相対実数かパーセンテージ値を使用します。以下が参考例です。
  • 0 = 0%
  • 0.5 = 50%
  • 1 = 100%
backdrop-filter: sepia(30%);

div{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: sepia(30%);
}

目次に戻る

グローバル値

backdrop-filterプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnoneに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{backdrop-filter: グローバル値;}

目次に戻る

補足説明

  • 純粋インラインを除くすべての要素に適用可能 (※ inline-blockなどは可能)
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

backdrop-filter: none;

backdrop-filter: blur(2px);

backdrop-filter: brightness(80%);

backdrop-filter: contrast(150%);

backdrop-filter: drop-shadow(5px 5px 5px black);

backdrop-filter: grayscale(50%);

backdrop-filter: hue-rotate(180deg);

backdrop-filter: invert(10%);

backdrop-filter: opacity(80%);

backdrop-filter: saturate(170%);

backdrop-filter: sepia(30%);

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る