cssではfilterプロパティを使う事で画像をいろいろ調整したり、視覚効果を与えることが可能です。
今回はcssでフィルター効果が出来るfilterプロパティを見てみます。
css filterプロパティで画像を調整
css3では画像にフィルターを掛けることが可能になりました。filterプロパティを使う事で画像に色々なフィルターを追加・調整できます。
以下の通り記述するだけ。
- セレクタ{filter:種類(値);}
当ページで使っている明度を調整するフィルターの場合、以下の記述になります。
filterプロパティに以下のフィルター種類を記述することで各フィルターの効果が得られます。
- brightness (明度)
- contrast (コントラスト)
- blur (ぼかし)
- drop-shadow (ドロップシャドウ)
- grayscale (グレースケール)
- hue-rotate (色相環)
- invert (階調の反転)
- opacity (不透明度)
- saturate (彩度)
- sepia (セピア)
この10種類から便利そうなプロパティを以下にまとめておきます。
brightness(明るさ)
セレクタ{ filter: brightness(値%); }
画像の明るさを調整するフィルターです。
例えばテーマに組込み、ダークモードの時にだけ貼られた画像の明るさを暗くしたりするのも良いかと。
値は%で指定。
0%(真暗)〜100%(オリジナル)〜200%(明るさ2倍)…。
値が大きくなる程、画像が明るくなります。
左オリジナル、右が50%(明るさ1/2)
|
|
contrast(コントラスト)
セレクタ{ filter: contrast(値%); }
画像のコントラストの調整をします。
輝度をハッキリさせたい時等に。
0%(明暗の差が低い) 〜 100%(オリジナル) 〜 200%(明暗の差が大きい)
…。
値が大きくなる程、明暗の差が大きくなります。
左が50%、右が200%(2倍)
|
|
|
blur(ボカシ)
セレクタ{ filter: blur(値px); }
画像のボカシ処理です。
テーマに組込み、トップ画面等でサムネをボカす時に有効。
値は%は使わず、pxとします。(ガウス関数を用いる為の偏差値の為らしい。)
左オリジナル、右がボカシ値1px
|
|
|
grayscale(グレースケール)
セレクタ{ filter: grayscale(値%); }
画像を白黒に加工します。
値は0%(オリジナル)〜100%(完全白黒)の範囲で指定。
取り敢えず白黒にしたい画像に。
左が50%、右が100%
|
|
|
saturate(彩度)
セレクタ{ filter: saturate(値%); }
画像の彩度の調整をします。
メリハリのある色彩に調整したい時等に。
あまり使う事は無いかも知れませんが、コントラストと合わせて使う事があるかも知れません。
0%(白黒) 〜 100%(オリジナル) 〜 200%(鮮やか) …。
値が大きくなる程、鮮やかになります。
左オリジナル、右が300%
|
|
|
sepia (セピア)
セレクタ{ filter: sepia(値%); }
画像をセピアに加工します。
0%(オリジナル)〜100%(max)
左オリジナル、右が100%
|
|
|
filterのプロパティは複数組合せることも可能です。使用したいプロパティはスペースを入れて連続させるだけです。
例えばボカシを行い、セピアに加工する場合は以下の通り。
セピアにボカシを足したことで、古い写真の様な味のある画像になりました。
cssで簡単に加工できるので、ブログのテンプレートに組込んで見てはいかがでしょうか？
以上
コメント