webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。
それにより、フェルタ毎に複数の画像を用意する必要がなくなります。



cssのfilterプロパティで出来る事

  • grayscale(グレースケール)
  • saturate(彩度)
  • sepia(セピア)
  • hue-rotate(色相)
  • invert(色の反転)
  • blur(ぼかし)
  • brightness(明るさ)
  • contrast(コントラスト)
  • drop-shadow(ドロップシャドウ)
grayscale(値)

値:0~100%
備考:値が大きいほど、画像の色が白黒に近づく

saturate(値)

値:0~上限なし
備考:値が大きいほど、色が鮮やかになる。値の上限が無く、例えば10000%という値も設定可能。

sepia(値)

値:0~100%
備考:値が大きいほど、色が黒褐色に近づく。

hue-rotate(値)

値:0deg~360deg(上限・下限なし)
備考:360deg(1周)で元の色に戻る(-360degでも同じ)

invert(値)

値:0~100%
備考:値が大きいほど、写真のネガっぽくなる。

blur(値)

値:0px~上限なし
備考:値が大きいほど、ぼかしの度合いが大きくなる。値の上限が無く、例えば1000pxという値も設定可能


brightness(値)

値:0~上限なし
備考:値が大きいほど、明るさが大きくなる。値を値の上限が無く、0.67といった少数での値を指定可能。ちなみに値を0にすると色は真っ黒になる。

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)

値1~3:下限上限なし
値4~6:0~255
値7:0~上限なし
備考:値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す
値4~6で色の指定する(色の三原色rgb)
値7で明るさを指定する









migo-media.com