HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用71.要素の特殊効果(filter)

      2019/11/04   hatano

filterプロパティとは

指定した対象に特殊効果を適用します。filterプロパティは、要素だけでなく画像にも適用できる点があります。
主な効果としては、下記の通りです。

  • 色味(色相、彩度、明度など)の変更
  • ぼかし、影の効果
  • 透明度の変更

対応ブラウザ

Internet Explorerは、最新版も対応していないので注意してください。Edgeは対応しています。
Android Browser 4.4~4.4.4に対応する場合、ベンダープレフィックス-webkit-が必要です。

filterの各ブラウザの対応状況
Can I use -CSS Filter Effects-

filterの指定方法

各値は、関数になっています。引数に数値を指定することで効果が適用されます。
複数指定の場合は、各関数を半角スペースで区切ります。


img{
	filter: blur(3px);
}

blur() ぼかす

対象を指定した数値でぼかします。


img{
	filter: blur(5px);
}

下記は、ホバーまたはタップで画像をぼかすサンプルです。
※iOS Safaraiではタップで処理を実行する場合、ontouchstart=""が必要です。


<p><img src="img/fruits.jpg" alt=""></p>


p{
	transition: filter 0.3s;
}
p:hover{
	filter: blur(10px);
}

drop-shadow() 影をつける

対象に影を付けます。
box-shadowプロパティと同じ使い方もできますが、透過PNGに適用した場合、透明部分に影をつけることが可能になります。
引数は、X軸の移動距離、Y軸の移動距離、影のぼかすサイズ、影が広がるサイズ、色の順に指定します。
X軸の移動距離は必須です。整数は右方向、負の整数は左方向にずれます。
Y軸の移動距離は必須です。整数は下方向、負の整数は右方向にずれます。
影をぼかすサイズ、影が広がるサイズ、色の順は、省略可能です。
影が広がるサイズは、影をぼかすサイズの指定が必要です。
box-shadowプロパティと違い、内側の指定「inset」が指定できません。
色は、カラーコードrgba()、rgb()などで指定します。


/* 影をぼかすサイズ、影が広がるサイズも指定 */
img{
	filter: drop-shadow(16px 16px 20px 10px blue);
}
/* 影をぼかすサイズのみ指定 */
img{
	filter: drop-shadow(16px 16px 20px blue);
}

下記はサンプルです。上はbox-shadowプロパティ、下はfilter: dorp-shadow()を適用したものです。


<p class="img1"><img src="img/fruits.png" alt=""></p>
<p class="img2"><img src="img/fruits.png" alt=""></p>


.img1 img{
	box-shadow: 4px 4px 2px #333;
}
.img2 img{
	filter: drop-shadow(4px 4px 2px #333);
}

opacity() 透明度の調整

opacityプロパティと同じ効果になります。opacityプロパティとの違いは、%指定ができる点です。
引数は、0%~100%の間で指定します。単位なしの指定も可能です。
0%(0)~50%(0.5)~100%(1)

下記はすべて同じ設定です。


img{
	filter: opacity(50%);
	filter: opacity(0.5);
	filter: opacity(.5);
}

下記は、ホバーまたはタップで画像の透明度を下げるサンプルです。
※iOS Safaraiではタップで処理を実行する場合、ontouchstart=""が必要です。


<p><img src="img/fruits.jpg" alt=""></p>


p{ transition: filter 0.3s; }
p:hover{ filter: opacity(50%); }

hue-rotate() 色相の変更

対象の色相を変更します。色相環を使うため、単位は角度のdegまたは回転数のturnで指定します。

下記はすべて同じ設定です。


img{
	filter: hue-rotate(90deg);
	filter: hue-rotate(0.25turn);
}

下記は90度ごとの色相変化のサンプルです。1つ目は変更なしの画像です。


<p><img src="img/fruits.jpg" alt=""></p>
<p class="img90"><img src="img/fruits.jpg" alt=""></p>
<p class="img180"><img src="img/fruits.jpg" alt=""></p>
<p class="img270"><img src="img/fruits.jpg" alt=""></p>


.img90{ filter: hue-rotate(90deg); }
.img180{ filter: hue-rotate(180deg); }
.img270{ filter: hue-rotate(270deg); }

saturate() 彩度の変更

対象の彩度を変更します。
100%は何も変更しません。0%で完全に彩度がなくなります。
100%より低い場合は、彩度が弱く、100%より高い場合は、彩度が強くなります。
単位なしの指定も可能です。100%を1として計算します。下記はすべて同じ設定です。


img{
	filter: saturate(50%);
	filter: saturate(0.5);
	filter: saturate(.5);
}

下記は彩度のサンプルです。
1つ目は変更なし。2つ目は、彩度50%。3つ目は、彩度150%のものです。


<p><img src="img/fruits.jpg" alt=""></p>
<p class="img50"><img src="img/fruits.jpg" alt=""></p>
<p class="img150"><img src="img/fruits.jpg" alt=""></p>


.img50{ filter: saturate(50%); }
.img150{ filter: saturate(150%); }

brightness() 明度の変更

対象の明度を変更します。
100%は何も変更しません。0%で完全に黒になります。
100%より低い場合は、暗くなり、100%より高い場合は、明るくなります。
単位なしの指定も可能です。100%を1として計算します。

下記はすべて同じ設定です。


img{
	filter: brightness(50%);
	filter: brightness(0.5);
	filter: brightness(.5);
}

下記は明度のサンプルです。 1つ目は変更なし。2つ目は、明度50%。3つ目は、明度150%のものです。


<p class="img50"><img src="img/fruits.jpg" alt=""></p>
<p class="img150"><img src="img/fruits.jpg" alt=""></p>
<p class="img270"><img src="img/fruits.jpg" alt=""></p>

contrast() コントラストの調整

対象のコントラスト(明暗差)を調整します。
100%は何も変更しません。
100%より低い場合は、コントラストが弱く、100%より高い場合は、コントラストが強くなります。
単位なしの指定も可能です。100%を1として計算します。下記はすべて同じ設定です。


img{
	filter: contrast(50%);
	filter: contrast(0.5);
	filter: contrast(.5);
}

下記はコントラストのサンプルです。
1つ目は変更なし。2つ目は、コントラスト50%。3つ目は、コントラスト150%のものです。


<p><img src="img/fruits.jpg" alt=""></p>
<p class="img50"><img src="img/fruits.jpg" alt=""></p>
<p class="img150"><img src="img/fruits.jpg" alt=""></p>


.img50{ filter: contrast(50%); }
.img150{ filter: contrast(150%); }


.img50{ filter: brightness(50%); }
.img150{ filter: brightness(150%); }

invert() 色の反転

対象の色相、彩度、明度を反転させます。
引数は、0%~100%の間で指定します。単位なしの指定も可能です。
0%(0)~50%(0.5)~100%(1)
100%で色が完全に反転し、0%は変更されません。
50%に近づくほど、グレーっぽい色合いになります。50%は、完全なグレーになるので注意してください。
invert()は、invert(100%)と同じ。すべてが反転します。

下記はすべて同じ設定です。


img{
	filter: invert(30%);
	filter: invert(0.3);
	filter: invert(.3);
}

下記は、値を25%ずつ変化させたサンプルです。


<p><img src="img/fruits.jpg" alt=""></p>
<p class="img25"><img src="img/fruits.jpg" alt=""></p>
<p class="img50"><img src="img/fruits.jpg" alt=""></p>
<p class="img75"><img src="img/fruits.jpg" alt=""></p>
<p class="img100"><img src="img/fruits.jpg" alt=""></p>


.img25{ filter: invert(25%); }
.img50{ filter: invert(50%); }
.img75{ filter: invert(75%); }
.img100{ filter: invert(100%); }

grayscale() グレースケールに変換

対象をグレースケールに変換します。
引数は、0%~100%の間で指定します。単位なしの指定も可能です。
0%(0)~50%(0.5)~100%(1)
0%は変化がありません。100%は、完全なグレーになります。
grayscale()は、grayscale(100%)と同じ。完全なグレーになります。

下記はすべて同じ設定です。


img{
	filter: grayscale(50%);
	filter: grayscale(0.5);
	filter: grayscale(.5);
}

下記は、値を50%ずつ変化させたサンプルです。


<p><img src="img/fruits.jpg" alt=""></p>
<p class="img50"><img src="img/fruits.jpg" alt=""></p>
<p class="img100"><img src="img/fruits.jpg" alt=""></p>


.img50{ filter: grayscale(50%); }
.img100{ filter: grayscale(100%); }

sepia() セピア色に変換

対象をセピア色(茶色に近い色)に変換します。
引数は、0%~100%の間で指定します。単位なしの指定も可能です。
0%(0)~50%(0.5)~100%(1)
0%は変化がありません。100%は、完全なセピア色になります。
sepia()は、sepia(100%)と同じ。完全なセピア色になります。

下記はすべて同じ設定です。


img{
	filter: sepia(50%);
	filter: sepia(0.5);
	filter: sepia(.5);
}

下記は、値を50%ずつ変化させたサンプルです。


<p><img src="img/fruits.jpg" alt=""></p>
<p class="img50"><img src="img/fruits.jpg" alt=""></p>
<p class="img100"><img src="img/fruits.jpg" alt=""></p>


.img50{ filter: sepia(50%); }
.img100{ filter: sepia(100%); }

none

filterをすべて無効にします。


img{
	filter: none;
}

まとめ

  • blur()は、対象をぼかすことができる
  • drop-shadow()は、対象に影をつけることができる
  • opacity()は、対象の透明度の調整ができる
  • hue-rotate()、saturate()、brightness()は、色相、彩度、明度の変更ができる
  • contrast()は、対象のコントラストの調整ができる
  • invert()は、対象の色の反転ができる
  • grayscale()は、対象の色味をグレースケールに変換できる
  • sepia()は、対象の色味をセピア色に変換できる
  • noneは、filterの指定を無効にできる。