blog ブログ

2023.12.10

【CSS】filterプロパティを使って画像を加工してみよう

WEB#,

asa


こんにちは!デザイナーのasaです。

ここ最近新しいcssがどんどん出てきて、もうcssだけで何でも実装できるんでは?といった勢いですね。
そんな今回は「そこまで新しくないけどIEのサポート切れて使いやすくなったよね」といったfilterプロパティを紹介します。

filterプロパティとは

cssのfilterは、画像などの要素にぼかしや彩度、明度といったフィルターをかけることができるプロパティです。
簡単な加工ならわざわざphotoshopで編集しなくてもcssで出来ちゃいます。

filterプロパティの種類

filterプロパティは10種類の関数が用意されてます。

関数名 効果
blur ぼかし
brightness 明度
contrast コントラスト
drop-shadow ドロップシャドウ
grayscale グレースケール
hue-rotate 色相の回転
invert 階調の反転
opacity 不透明度
saturate 彩度
sepia セピア色

filterプロパティの使用例

こちらの画像を使ってそれぞれのfilterプロパティの使用例を紹介します。
なお関数の引数についてはパーセント(10%や60%など)もしくは10進数の値(0.1や0.6など)で指定可能です。

blur

blurは要素のガウスぼかしを適用します。ぼかしの大きさは「px」や「em」で指定します。

filter: blur(5px);

brightness

brightnessは明るさ、暗さを調整します。
0が最も暗く(真っ黒)、1が基準(元画像)で、1を超えると明るくなります。

filter: brightness(0.5);

filter: brightness(1.5);

contrast

要素のコントラストを調整します。
0が最もコントラストが低く(グレー)、1が基準(元画像)で、1を超えるとコントラストが高くなります。

filter: contrast(0.5);

filter: contrast(1.5);

drop-shadow

指定した要素の輪郭に沿ってドロップシャドウを適用します。
引数は4つで、順に「X方向の距離」「Y方向の距離」「ぼかしのサイズ」「シャドウの色」となります。
box-shadowとよく似ていますが、box-shadowの場合オブジェクト自体に影がつきますが、drop-shadowはオブジェクトの中身を見て影がつきます。

以下がbox-shadowとdrop-shadowの違いです。

box-shadowの場合

box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);

drop-shadowの場合

filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

grayscale

grayscaleは画像をグレースケールに変換します。初期値は0で、1で完全なグレースケールとなります。

filter: grayscale(0.5);

filter: grayscale(1);

hue-rotate

hue-rotateは色相の角度を回転させます。角度の単位は「deg」で指定します。

filter: hue-rotate(45deg);

filter: hue-rotate(180deg);

invert

invertは色の階調を反転します。0が基準(元画像)で1で完全に反転されます。

filter: invert(0.3);

filter: invert(0.8);

opacity

opacityは要素の透過率を調整します。0で完全な透明、1が基準(元画像)となります。

filter: opacity(0.3);

filter: opacity(0.7);

saturate

saturateは要素の彩度を調整します。
0が最も彩度が低く、1が基準(元画像)で、1を超えると彩度が高くなります。

filter: saturate(0.5);

filter: saturate(1.5);

sepia

sepiaは画像をセピア調にします。0が基準(元画像)で1で完全にセピアになります。

filter: sepia(0.5);

filter: sepia(1);

filterプロパティ応用編

filterプロパティは複数掛け合わせることもできます。
こちらの画像をPCの方はマウスホバー、スマホの方はタップしてください。

 
使用しているfilterプロパティは「grayscale」と「drop-shadow」です。

img {
  filter: grayscale(1);
  transform: translate(20px,20px) scale(1);
  transition: 0.3s;
}
img:hover {
  filter: grayscale(0) drop-shadow(5px 5px 5px rgba(0,0,0,0.15));
  transform: translate(0,0) scale(1.1);
}

マウスホバー時(タップ時)にグレースケールからカラーにし、さらにドロップシャドウをつけてみました。もちろん使用している写真は1枚です。
こんな感じでちょっとしたアクセントをつけることもできるので、いろいろ試してみてはどうでしょうか。

まとめ

いかがだったでしょうか?cssだけでもできることがどんどん増えています。今後も新しい機能が実装されていくと思うので、また機会があれば紹介していきます。

また弊社ではWEBやDTPの制作からマーケティングまでワンストップで対応していますので、お気軽にお問い合わせください。

posted article 投稿記事

  • 【初心者向け】実務で使える便利な機能5選(コーディング編)

    2024.09.12

    【初心者向け】実務で使える便利な機能5選(コーディング編)

    WEB
  • 【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    2024.06.15

    【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    WEB
  • スライダーライブラリ「Splide」を使ってみた

    2024.04.10

    スライダーライブラリ「Splide」を使ってみた

    WEB
  • PHP7からPHP8へのバージョンアップでエラー発生?

    2024.01.30

    PHP7からPHP8へのバージョンアップでエラー発生?

    WEB
View more

contact お問い合わせ・ご相談

制作のご依頼や予算のお見積りなど、まずはお気軽にお問い合わせください。

contact