blurifyは画像にぼかし効果を実装することができるJSライブラリです。とても軽量（〜2KB）なライブラリなので、PCではもちろん、スマホやタブレットでもサクサク動作させたい人にはピッタリですね。 blurifyの実際のデモ動作は以下のページから見ることができます。 デモ デモではフルスクリーンで表示された画像に、しっかりとぼかし効果がかかっています。実装方法もシンプルだし、ファイル容量も軽量なところがいいですね。 オプションは全部で、images、blur、modeの3つが用意されています。imagesにはぼかし効果をつけたい要素を指定します。blurはぼかし具合を数値で指定します。デフォルトは6です。 また、modeは3種類の中から選ぶことができます。具体的には、css、canvas、autoの3種類です。デフォルトはcssになっています。 軽量ながらもオプションによる手軽なカスタマ
背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; background-image: var(--bg); } .blur-container.blur-8::after { background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.8; -webkit-filter: blur(6px); filter: blur(6px);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く