CSS を使って背景をぼかす方法についての考察

以下の記事で紹介されていた CSS を WordPress.com に適用できるかどうかの確認です。

OK でした。なお、いくつか手直ししてあります。変更前後表は以下の通りです。ので、改めて HTML、CSS を掲載します。より具体的に修正箇所を確認したい方は difff 等でご確認ください。手抜きですみません。

 


 

テーマの種類にもよりますが、以下の記述を記事に追加し、

カスタマイズ機能で以下の CSS を追加すると、

*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

* {
position: relative;
}

article {
width: 300px;
position: absolute;
top: 40px;
left: 40px;
background: inherit;
background-position: -40px -40px;
border-radius: 6px;
-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.5);
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
overflow: hidden;
}

article:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: blur(10px) saturate(2);
-webkit-filter: blur(10px) saturate(2);
}

article .title {
padding: 8px;
background: rgba(225,225,225,0.5);
border-bottom: 1px solid rgba(0,0,0,0.05);
text-align: center;
}

article .content {
padding: 8px;
background: rgba(255,255,255,0.5);
}

以下のような感じで画像をぼかした領域を作成することができるようです。閲覧状況は mac の Chrome, Safari, Firefox, iPad 3 で確認しました。

2016-01-04 at 13.48.jpg

手動で背景画像の位置の調整が必要だったり、レスポンシブには適用できなさそうなので、この方法のままでは使い勝手が悪そうですが、とりあえず、「CSS で画像をぼかすことができるらしく、WordPress.com でも使えるらしい」という確認作業としての覚え書きです。

参考

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。