CSS | filterで画像や要素をセピア調に表示するサンプル集

CSSのfilterプロパティのsepia()を使って画像や要素をセピア調に表示するCSSサンプルを紹介します。

filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロパティです。

filter: sepia()の基本

filter: sepia()に付与するオプション引数は0~1までの数値で、未指定時は1がデフォルト値として設定されています。
0で変化なし、1で強さの最大値となっています。

filter: sepia(1);

filter: sepia()の0～1.0までを指定した場合の比較画像です。上から順に0、0.1…0.9、1.0となっています。

画像に文字を重ねて表示する場合は、上記サンプルのCSSのように、container部分にfilterを追加してしまうと、その中にある全ての要素にfilterが反映されてしまいます。

filterは子要素・疑似要素でCSSによる解除できませんので、テキスト部分はfilterの効果を受けないような構造にしておく必要があります。

マウスホバーでセピア調に、またはセピアから戻す場合の方法です。

filterは子要素・疑似要素でCSSによる解除できませんが、マウスホバー時に使う「:hover」では「filter: none;」を使った解除が可能です。

また、CSSのfilterにtransitionでアニメーション時間を設定するにはtransitionでtransformではなくfilterを指定することで反映させることが可能です。

例えば、以下のように指定します。

transition: filter 0.3s ease;

マウスホバーでセピア調から元に戻す動作サンプルです。

Posted by Yousuke.U

まだ、コメントがありません