CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応

CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応 iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 投稿日2015年05月07日 更新日2015年05月07日 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before, * {

[thleap]

写真の上に文字載せたいときに便利そう

[twol]

“基本的にCSSに下の要素をぼかす機能はない”

[s99e209]

CSSで曇りガラス風効果を指定するには、filter: blur が使える。

[hisasann]

blur

[mut00tum]

曇りガラス

[nobuocreate]

メモメモ

[matsumosan]

CSS3でぼかし

[dgwingtong]

へ

[yfnt]

CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応 | webOpixel