CSS | filterで画像や要素をセピア調に表示するサンプル集
CSSのfilterプロパティのsepia()を使って画像や要素をセピア調に表示するCSSサンプルを紹介します。
filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロパティです。
filter: sepia()の基本
filter: sepia()に付与するオプション引数は0~1までの数値で、未指定時は1がデフォルト値として設定されています。
0で変化なし、1で強さの最大値となっています。
filter: sepia(1);See the Pen CSS filter: sepia() by yochans (@yochans) on CodePen.
filter: sepia()の比較
filter: sepia()の0～1.0までを指定した場合の比較画像です。上から順に0、0.1…0.9、1.0となっています。
See the Pen CSS filter: sepia() by yochans (@yochans) on CodePen.
画像に文字を重ねる場合
画像に文字を重ねて表示する場合は、上記サンプルのCSSのように、container部分にfilterを追加してしまうと、その中にある全ての要素にfilterが反映されてしまいます。
filterは子要素・疑似要素でCSSによる解除できませんので、テキスト部分はfilterの効果を受けないような構造にしておく必要があります。
See the Pen CSS filter: sepia() image & text by yochans (@yochans) on CodePen.
マウスホバーでセピア調に、またはセピアから戻す場合
マウスホバーでセピア調に、またはセピアから戻す場合の方法です。
filterは子要素・疑似要素でCSSによる解除できませんが、マウスホバー時に使う「:hover」では「filter: none;」を使った解除が可能です。
また、CSSのfilterにtransitionでアニメーション時間を設定するにはtransitionでtransformではなくfilterを指定することで反映させることが可能です。
例えば、以下のように指定します。
transition: filter 0.3s ease;マウスホバーでセピア調から元に戻す動作サンプルです。
See the Pen CSS filter: sepia() by yochans (@yochans) on CodePen.