【CSS】Filter Effects まとめと活用した表現

Filter Effectsとは？

CSSモジュールの一つで、要素が文書内に表示される前の処理方法を定義します。
プロパティと各種関数について、学びます

プロパティ

• backdrop-filter
  • CSSのプロパティで、要素の後ろの領域に、ぼかしや色変化のようなグラフィック効果を適用する
  • 適用する要素自体の背景を半透明にする必要がある
• filter
  • CSSのプロパティで、要素にぼかしや色変化などのグラフィック効果を適用する

プロパティで利用できる関数

blur()

• 適用された要素にガウスぼかしを適用する
• blur(radius)
  • radiusは、pxやrem単位で入力できる

ガウスぼかし：中心が一番濃く、外側に向かってなだらかに薄くなる

See the Pen blur() by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

brightness()

• 線形乗算を適用し、明るくしたり暗くしたりする
• brightness(amount)
  • amountは、numberや%で指定する

線形乗算：すべての色の数値(RGB)に、一定の数字（倍率）を掛け算する

例

• (R:100, G:50, B:20)の背景にbrightness(2.0)（200%）を適用
  • (R:200, G:100, B:40) となり、色が明るくなる
• (R:100, G:50, B:20)の背景にbrightness(0.5)（50%）を適用
  • (R:50, G:25, B:10) となり、色が暗くなる

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

contrast()

• コントラストを調整する
• contrast(amount)
  • amountは、numberや%で指定する
• contrast(0)は完全な灰色になる

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

drop-shadow()

• ドロップシャドウ効果を適用する
• box-shadowプロパティと似た効果だが、drop-shadowは画像自体の形にあった影を作る
• drop-shadow()の引数
  • color：影の色
  • length：影をずらす距離とぼかしの強さ
    • 値が二つの場合：drop-shadow(5px 5px)
      • 水平・垂直方向のオフセットの値として解釈される
    • 値が三つの場合：drop-shadow(5px 5px 15px)
      • 3つ目の値は、ぼかしの半径として解釈される

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

grayscale()

• グレースケールに変換する
• grayscale(amount)
  • amountは、numberや%で指定する

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

hue-rotate()

• 要素およびその中身のコンテンツの色相環を回転させる
• hue-rotate(angle)
  • angleは、deg, rad, grad, turnで示す

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

元の色の彩度や明度が維持されない場合もある

invert()

• 色相環で真反対にある色に置き換える
  • 例：赤色→シアン、青色→黄色、白色→黒色
• hue-rotateとの違い
  • 明るさも反転する
    • 明るい部分は暗く、暗い部分は明るくなる
• invert(amount)
  • amountは、numberや%で指定する
• invert(50%)
  • 元の色と反対の色が、ちょうど真ん中で打ち消し合って、グレーになる

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

opacity()

• 透過性を適用する
• opacity(amount)
  • amountは、numberや%で指定する

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

saturate()

• 彩度を上げたり下げたりする
• saturate(amount)
  • amountは、numberや%で指定する
• saturate()は色相や明度を保存しない

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

sepia()

• セピア色に、より暖かい、より黄色/茶色がかった表現に変換する
• sepia(amount)
  • amountは、numberや%で指定する

See the Pen sepia() by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

Filter Effectsを活用する

hoverすると、すりガラス風になる

See the Pen filter-hover by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

blur()と brightness()を組み合わせています。
filterは関数をいくつも組み合わせて指定できます。宣言順に適用されます。

.glass-card:hover .glass-content {
  opacity: 1;
  backdrop-filter: blur(12px) brightness(1.1);
  background: rgba(255, 255, 255, 0.1);
}

hoverすると、サーモグラフィっぽく色が変わる

See the Pen Untitled by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

.thermo-container:hover .thermo-image {
  transform: scale(1.05); 
  filter:    
    invert(100%)  /* 暗い画像が明るくなる */
    hue-rotate(180deg) /* 色相を回転させる */
    contrast(1.5)  /* コントラスト比を上げてくっきりさせる */
    saturate(3)   /* 彩度を上げて鮮やかな発色 */
    brightness(0.5); /* ギラつきを抑えるために明るさを下げて調整 */
}

さいごに

blur()やdrop-shadow()はよく見かけますが、あまり知らなかったfilterを知ることができました！
filterの関数を組み合わせて、新しい表現を見つけたいと思います

アドカレ2025が開催中！

今年もアドカレ開催中です
最終日まであとちょっと...！！！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考