CSS 画像のぼかし、補正

CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。

フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。

たくさんの種類があるので、どんなことができるのか並べてみましょう。

画像を押すと元の画像が表示されるようにしたので、見比べてみてください。

元画像

元の画像。補正なしです。

filter: blur(2px);

ぼかしです。ピントのブレを大きくできます。

filter: brightness(0.4);

明るさの調整です。60%暗くしたらこんな感じ。明度。トーンダウン。

filter: contrast(200%);

コントラストを強めます。色の濃淡をハッキリさせる度合いです。二極化。

filter: drop-shadow(16px 16px 20px blue);

影を調整できます。box-shadowとほぼ同じぽい。横位置、縦位置、ぼかし、色。

filter: grayscale(50%);

グレースケールです。白黒で表現する度合いです。（同じ彩度の黒に変換している。）

filter: hue-rotate(180deg);

色相環の円をぐるっと移動させる角度です。反転がつまり補色。（白黒は影響少）

filter: invert(50%);

色を反転します。ネガポジ反転的な。白は黒くなる。黒は白くなる。

filter: opacity(30%);

透明度の調整です。opacity:0.3も同等ぽい。

filter: saturate(30%);

彩度の調整。簡単にいうと全ての色から均等に血の気を引く。最後は真っ白。

filter: sepia(60%);

セピア調の度合い。古っぽさもあるけどいい感じ。イカ墨のことらしいセピアって。

以上のように画像加工はもうCSSで充分なくらいできるようになりました。

もちろん、上記のスタイルを複合的に使うことで複雑な表現も可能です。

画像だけでなく、いろんな要素にも使えそうで、アニメーションさせればおもしろい演出ができそうです。

公開 2019-07-30 22:28:24

このページの二次元コード