Blog スタッフブログ

WEB制作の山田です。

前回に引き続き、便利なCSSプロパティを紹介いたします。

WEBサイト上にアップロードした画像に何らかの加工を行う際、画像加工用のソフトを用いて修正を加えるのが一般的です。ただ、CSSプロパティ”filter”を活用すればこうした加工をCSSのみで完結させることもできます。

■filter:grayscale();

()内に任意の数値を記述することで画像の彩度を調整することができます。
上記画像では

filter: grayscale(80%);

を設定してあります。

■filter: blur();

()内に記述した数値によって画像をぼかし加工することができます。

グラスモーフィズムと呼ばれる、ぼかしを活用したデザインの再現などで役立ちそうですね。

上記画像では

filter: blur(5px);

と設定してあります。

■filter: brightness();

()内の数値によって画像の輝度を変更できます。

バナーの背景などで輝度を下げた画像を使用する際などで画像の輝度を自由に調節できるので、画像を直接編集するよりサイト構築のメンテナンス性が上がります。

上記画像では

filter: brightness(50%);

と設定してあります。

■filter: drop-shadow();

()内の数値によって画像にドロップシャドウを作ることができます。

上記画像では

filter: drop-shadow(0 0 20px #222);

と設定してあります。

画像の加工要素をCSSだけで済ませることで、構築段階やサイト完成後の微修正におけるメンテナンス性の向上にもつながりますし、ホバーによる動きのバリエーションも広げることができるのがfilter:の強みです。