晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

CSS Filterを使えば、簡単に色調(明度や彩度)加工ができる。

CSS Filterを試してみた。

CSS Filterを使えば、写真そのものを加工しなくても、ブラウザ上で彩度、明度、コントラスト等色調を変えて表示できる。

CSSは簡単。例えばグレースケールにしたければ、<img>にgrayscaleフィルタを指定するだけで良い。

    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

明度を変えるなら、下のようにbrightnessフィルタを指定する。

    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);

【フィルタ種類】

filter: grayscale(50%); /* グレースケール */
filter: sepia(50%); /* セピア */
filter: saturate(140%); /* 彩度 */
filter: brightness(0.8); /* 明度 */
filter: contrast(120%); /* コントラスト */
filter: hue-rotate(45deg); /* 色相変換 */
filter: opacity(0.6); /* 透明度 */
filter: blur(2px); /* ぼかし */
filter: invert(80%); /* 階調反転 */

実際に試したサンプルが以下。

↑ オリジナル写真
↑ グレースケール:grayscale(100%)
↑ グレースケール:grayscale(50%)
↑ セピア:sepia(100%)
↑ セピア:sepia(50%)
↑ 彩度:saturate(200%)
↑ 彩度:saturate(140%)
↑ 明度:brightness(1.2)
↑ 明度:brightness(0.8)
コントラスト:contrast(140%)
コントラスト:contrast(120%)
↑ 色相変換:hue-rotate(90deg)
↑ 色相変換:hue-rotate(45deg)
↑ 透明度:opacity(0.8)
↑ 透明度:opacity(0.6)
↑ ぼかし:blur(3px)
↑ ぼかし:blur(2px)
↑ 階調(色と輝度)反転:invert(100%)
↑ 階調(色と輝度)反転:invert(80%)