webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

radial-gradient + background-blend-mode =vignette effect

  • vignette effect 周辺光量落ちをcssで再現する。
  • 使うのは、radial-gradientとbackground-blend-mode
  • 下の二枚の画像をブレンドする。

f:id:ohta-felica:20161030141105p:plain

 

f:id:ohta-felica:20161030141416p:plain

 

  • 楕円形のグラデーションをこんな風に指定すると、、、
  • #ffffff 0%, #ffffff 50%, #000000 50%
  • マスクになってしまいます。

 

f:id:ohta-felica:20161030141851p:plain