画像に対して彩度を上げたり、コントラストを下げたり、モノクロ処理やセピア処理…こういった加工を行いたい場合、一般的にはPhotoshop等の画像編集ソフトを使うのが普通かと思います。がしかし…こういった加工も簡易的であればCSS3のfilterプロバティを使うことにより簡単に再現できてしまうのです！どういった感じなのか…それでは見ていきましょう！
※ブラウザ毎の対応状況はCan I useでご確認ください。
コンテンツ一覧
使える10種類のエフェクト
基本的に使用できるエフェクトとしては、以下の10種類となります。
| blur | ぼかし処理。【初期値：0px】 |
|---|---|
| grayscale | モノクロ処理。【初期値：0%】 |
| sepia | セピア処理。【初期値：0%】 |
| saturate | 彩度。【初期値：100%】 |
| hue-rotate | 色相回転。【初期値：0deg】 |
| invert | 階調反転。【初期値：0%】 |
| opacity | 透過度。【初期値：100%】 |
| brightness | 明るさ。【初期値：100%】 |
| contrast | コントラスト。【初期値：100%】 |
| drop-shadow | 影処理。【初期値：none】 |
例えば、とあるimg要素に対して彩度を上げたいといった場合…コード的には以下のような形になりますね。
img {
filter: saturate(200%);
}
たったのこれだけで彩度が上がって調整された画像が表示されるのです。はい、簡単便利ですね！
それでは、実際にいくつかエフェクトを試してみましょう。
いくつかエフェクトを試してみる
彩度を上げる
img {
filter: saturate(200%);
}
モノクロ処理
img {
filter: grayscale(100%);
}
セピア処理
img {
filter: sepia(100%);
}
いかがでしたしょうか？
1行の記述だけでこのようなエフェクトが適用できるfilter、といいますかCSS3といいますか…改めて便利だなーと痛感しました。
この記事内では3種類のエフェクトをご確認いただきましたが、10種類のエフェクト全てが確認できるサンプルを今回も別途設けましたので、そちらも併せてご確認いただければと思います！
積極的にCSS3が使いやすくなってきている昨今、恐れることなく挑み続け、便利なコーディングライフを勝ち取りたいですね！
何が言いたいんでしょうね、以上です！
コメントする