この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の[CSS]をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
![画像で分かる、新しいCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/fad31c48efcb9f7d7bbfe6d010d3e10265a93cfd/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fcss-tw-backdrop-filter-1.png%3Ffit%3D1200%252C675%26ssl%3D1)