今まで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で明るさを指定する