【CSS】CSSフィルタ機能の使い方・CSSで写真の加工

2014年12月15日

【CSS】CSSフィルタ機能の使い方・CSSで写真の加工

写真ブログなので、
写真に関連したcssについて。

cssフィルタを使うと、Photoshopでやるような明度や彩度、コントラストなどの
設定が出来ます。

ドロップシャドウ（drop-shadow）

これはbox-shadowと同じような感じ。
このブログは写真にうっすらとbox-shadowで影をつけてるので、
分かりやすく激しめの影にしました。

img {
    -webkit-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
    -moz-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
    -o-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
    -ms-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
    filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}

透明度（opacity）

透明効果もopacityと同じ。

img {
    -webkit-filter: opacity(0.6);
    -moz-filter: opacity(0.6);
    -o-filter: opacity(0.6);
    -ms-filter: opacity(0.6);
    filter: opacity(0.6);
}

明るさ（brightness）

明度の指定。
デフォルトは1.0。0で明るさはなくなり、真っ暗。
明るさの上限はないそうです。

img {
    -webkit-filter: brightness(0.4);
    -moz-filter: brightness(0.4);
    -o-filter: brightness(0.4);
    -ms-filter: brightness(0.4);
    filter: brightness(0.4);
}

彩度（saturate）

彩度の指定。
デフォルトは100%で最小が0%。
こちらも上限はないそうです。500%にしてみました。

img {
     -webkit-filter: saturate(500%);
     -moz-filter: saturate(500%);
     -o-filter: saturate(500%);
     -ms-filter: saturate(500%);
     filter: saturate(500%);
}

コントラスト（contrast）

コントラストの指定。
こちらもデフォ100％、最小0%、上限はなしです。
300%にしてみました。さっきから激しすぎかなぁ。。。

img {
    -webkit-filter: contrast(300%);
    -moz-filter: contrast(300%);
    -o-filter: contrast(300%);
    -ms-filter: contrast(300%);
    filter: contrast(300%);
}

ぼかし（blur）

ぼかし設定です。
最小が0pxで上限はありません。
ぼかしたいだけpx数をあげましょう。

img {
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        -o-filter: blur(5px);
        filter: blur(5px);
}

グレースケール（grayscale）

0%から100％で指定します。
100%にしてみました。白黒写真になりました。

img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

セピア（sepia）

0%から100％で指定します。
程よいところで50%にしてみました。

img {
    -webkit-filter: sepia(50%);
    -moz-filter: sepia(50%);
    -o-filter: sepia(50%);
    -ms-filter: sepia(50%);
    filter: sepia(50%);
}

階調の反転（invert）

階調の反転もすることができます。すごい。。
0%から100%で指定します。100％にしてみました。
50%にするとちょうど真ん中なので、写真がグレー一色になります。

img {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}

色相変換（hue-rotate）

色相変換もできる。。。
デフォルトは0で数値は、0から360degで一周します。
数値に制限はありませんが、500degと指定しても、140degと同じなので、
0から360degの範囲内だけでいいです。
今回は300degにしてみました。

img {
    -webkit-filter: hue-rotate(300deg);
    -moz-filter: hue-rotate(300deg);
    -o-filter: hue-rotate(300deg);
    -ms-filter: hue-rotate(300deg);
    filter: hue-rotate(300deg);
}

CSSで加工できるって便利ですね。
class使えば一括指定できるし。

記事一覧へ

Pocket

Snaplog