応用71.要素の特殊効果（filter）

filterプロパティとは

指定した対象に特殊効果を適用します。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>

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

<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の指定を無効にできる。