Pocket

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

しかもこれ動画の加工もできます。すごい!

以下、それぞれの使い方を紹介します。

目次
  1. ドロップシャドウ
  2. 透明度
  3. 明るさ
  4. 彩度
  5. コントラスト
  6. ぼかし
  7. グレースケール
  8. セピア
  9. 階調の反転
  10. 色相変換
  11. 動画でも使える

ドロップシャドウ(drop-shadow)

IMG_3804

これは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)

IMG_3804

透明効果も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)

IMG_3804

明度の指定。
デフォルトは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)

IMG_3804

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

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

コントラスト(contrast)

IMG_3804

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

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

ぼかし(blur)

IMG_3804

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

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

グレースケール(grayscale)

IMG_3804

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

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

セピア(sepia)

IMG_3804

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

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

階調の反転(invert)

IMG_3804

階調の反転もすることができます。すごいですね。
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)

IMG_3804

色相変換もできます。
デフォルトは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使えば一括指定できるし。

ちなみにこれらのCSSフィルターは動画にもかけることができます。

すげー!!

Pocket

カテゴリー: タグ: