yuheijotaki.com

filter:blur()を地道な手法で

実際こういうの使える場面スマホのみ案件でないと使いにくいわけで、地道で地味な手法で画像くっきり/ぼかしを再現するにはどうしたもんだろうと思ってやってみたのがこちら

 

デモ

 

やり方

  • Photoshop(!)で通常画像とぼかし画像を用意(!)します
  • 重ねて表示するように仕込んでおいて、ぼかしの画像の方をフェードインさせます

 

その上にテキストのせたり、IE対応がとても面倒だと思いますがPNGのテキスト画像を逆パターン(ぼかし→くっきり)でのせたり、もうちょっとイージングを調整したりすると良いのじゃないかなーーー