2017/04/18

CSS3 box-shadowを使って画像の輪郭(境界線)をぼかす

ウェブサイトに画像をそのまま貼ると、輪郭(境界線)が強調され浮き出てしまい、変に目立ってしまうことがある。画像の輪郭をぼかせば、「ふわっ」となり背景に馴染む。
ということで、box-shadowプロパティを使って画像の輪郭をぼかす方法をまとめる。

2017/04/14

2017/04/13

CSS3 背景画像だけにガウスぼかしをかける方法

モダンなシングルページレイアウトのウェブサイトで、背景画像をすりガラスのようにぼかしてタイトルを強調させるデザインをよく見る。多くの場合は画像自体にあらかじめフィルタをかけているのだが、CSS3を使うとfilterプロパティを使うだけでblur効果をかけられる。

ただ、ちょっと面倒だったので方法をまとめておく。