文字にぼかしを掛けて読めなくしたい。画像にぼかしを掛けて背景にしたい。Photoshopで画像にして処理すれば簡単にできますが、いちいち作るのが手間。CSSでもっと簡単にできないの?という方に今回、CSSでできるコンテンツや背景のぼかし方をご紹介します。クラス付与だけでコンテンツをぼかす方法ぼかすだけならとてもシンプルです。以下のようなクラスを定義し、ぼかしたいコンテンツにクラスを付与するだけで完了です。blur(6px);}実際にぼかしを掛けたのが以下になります。左が普通のコンテンツ、右がblurクラスを付与したコンテンツです。背景のぼかしは擬似要素beforeをしようすることで掛けることができます。以下、ソースになります。-1;}以下、実装画面になります。CodePen.ぼかした場合、画像端がボケて見えてしまいますので、5pxブラーした場合は上下左右は-5pxすることで端を切り落として綺麗に見えます。まとめぼかしを上手く活用すれば、デザインの幅も広がりとても便利です!ぜひご活用下さい。...2018.07.30Web制作・ホームページ制作CSS「display:grid;」便利すぎる!もう、Bootstrap不要?!2019.02.19Web制作・ホームページ制作Canvasを使ったカッコいいドットアニメーション背景にも使えるCanvasのカッコいいドットアニメーションを6つご紹介します。