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)
|
↑ 色相変換:hue-rotate(45deg)
|
↑ 色相変換:hue-rotate(90deg)
|
↑ 色相変換:hue-rotate(180deg)
|
↑ 色相変換:hue-rotate(270deg)
|
↑ 透明度:opacity(0.8)
|
↑ 透明度:opacity(0.6)
|
↑ ぼかし:blur(3px)
|
↑ ぼかし:blur(2px)
|
↑ 階調(色と輝度)反転:invert(100%)
|
↑ 階調(色と輝度)反転:invert(80%)
|