CSSの「filter」で画像をグレースケール・セピア・ぼかし処理

 

 Web技術

今までPhotoshopなどで調整していた
画像のぼかしグレースケール処理
CSSの「filter」で行えます。

※ですが残念ながら「filter」は
Internet Explorerが対応しておりません(#゚Д゚)

画像をグレースケールにする:grayscale()

0%(原色)~100%(完全なグレー)

DEMO

指定なし

100%

セピアがかった色合いにする:sepia()

0%(原色)~100%(完全なセピア)

DEMO

指定なし

100%

画像にぼかしをかける:blur()

0px(原色)~

値大きくなるほど、ぼかしの度合いが強くなります。
いろいろな長さの単位で指定できます。
「%」の指定はできません。

DEMO

指定なし

1px

「transition」と合わせてアニメーションしてみる

グレースケールからロールオーバー時に原色に戻す処理を作成してみます。

DEMO

↓画像にカーソルを乗せると原色に戻ります。

その他のfilter

他にも様々なfilterがあります。

  • 画像の明るさを調整する:brightness()
  • 画像のコントラストを調整する:contrast()
  • 画像の色の彩度を調整する:saturate()
  • 画像の色相反転:hue-rotate()
  • 画像の階調反転:invert()
  • 画像を半透明にする:opacity()
  • 画像にドロップシャドウ効果をかける:drop-shadow()

 

Internet Explorerが未対応で残念ですが
JavaScriptや複数の画像を用意する必要がなく
使い所によっては非常に便利です。

========================

▼参考にさせていただきました。ありがとうございます。

https://iholdings.jp/archives/2917
https://nakazilab.com/only-css-gray-scale/

 この記事の投稿者

iziz

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。
  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

ページ最上部へ