用途
新着
履歴
言語




CSS 画像のぼかし、補正

CSS 画像のぼかし、補正
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
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top