See the Pen Frosted Glass Title for some templates by Manami F (@Manamin) on CodePen.

Movabletype.netの開発において、ウェブページのタイトルを曇りガラス調にしようという話になりました。  

この案件では、Movabletype.netの標準テーマである「One Page」をベースにカスタマイズしています。

One Pageでは、ウェブページはトップページにパララックスで表示されます。

そのスクリプトを部分引用させてもらいウェブページのテンプレートを作りました。

ちなみにBootstrapも使われているのでカスタマイズが楽です。  

ちょっと話が長くなりましたが、テンプレート等で複数ページを出力する際、クライアントが投稿した画像を背景画像にセットし、ページタイトルを曇りガラス調にするというお題です。    

HTMLの説明

  ・HTMLでBoxを作り、インラインで背景画像を設定する。その中にタイトルのH2などを作りタイトルを設置する。

 通常の背景画像URLを使用した場合のHTML

<div class="pageimage img-blur" style="background: url(http://goo.gl/Kx3bdH);background-position: center;background-size: cover;background-attachment: fixed;">

<h2 class="img-blur-inner">Frosted Glass</h2></div>

  Movabletype.netのカスタムフィールドタグを使った場合の背景指定（識別子はpageimage）

・最初に画像のURLを変数に代入して、インラインの指定で使っています。

 ・画像が設定されていない場合にはデフォルトの画像を設定しています。

<mt:SetVarBlock name="topimgurl"><mt:If tag="CustomFieldValue" identifier="pageimage"><mt:CustomFieldAsset identifier="pageimage"><$mt:AssetURL$></mt:CustomFieldAsset><mt:Else>/images/main-sub.jpg</mt:If></mt:SetVarBlock>

<div class="pageimage top img-blur" style="background: url(<$mt:GetVar name='topimgurl' encode_html='1'$>);background-position: center;background-size: cover;background-attachment: fixed;"><h2 class="img-blur-inner"><$mt:PageTitle encode_html="1"$></h2></div>

   

CSSの説明

  曇りガラス効果はCSSのblurを使います。

blurは背景画像に設定すると、その中の要素、テキスト等もすべてがぼやけてしまいます。  

そこで、背景画像となるボックスにまずは背景画像を設定し、そのボックスに擬似クラス::beforeで中身の無いボックスを作り、元のボックスと同じ大きさに引き伸ばしたものにblur効果をつけた背景画像を設定します。

同じ画像が２枚重なっているイメージです。

上の画像にblurがかかっているイメージです。  

そのままですと、上のボケた画像が見えるだけになってしまいますので、擬似クラスで作るボックスは、widthやheightを設定し、paddingで中央に配置する箱とします。

その際、高さはピクセルで固定に設定し、横幅は％で可変に設定するとレスポンシブに対応できます。  

擬似クラスで背景画像を設定する際に、２つの大きなポイントがあります。  

可変画像はHTML側だけで指定してあり、CSSで背景指定する事は出来ません。

そこで、擬似クラスの背景画像設定で background: inherit; と指定します。  

擬似クラスの背景指定で、background-clip: content-box;を設定する事で、paddingの部分には背景画像が表示されなくなり、最初に設定したBlurのかかっていないクリアな画像が見えるという具合です。  

この擬似クラスで作ったblurがかかっている部分はpaddingで作っているので、borderなどはblurとの境に引く事が出来ません。  

そこで、タイトルのボックスは、この擬似クラスのblurの真上に来るようにボックスを設定し、borderやbox-shadowなどで装飾するとより曇りガラス風になります。

（CodePenでの設定数値は異なっていますが、通常は同じ数値にすると真上に来ます）  

タイトルのボックスに透明度のある画像などを加えるとオシャレな感じですね。    

※画面幅を大きく想定しているので、PC設定では高さを500pxにしてあります。

スマホ時のメディアクエリーでは、高さを250pxにしています。

※入れ物のdivは.pageimage と.img-blurのクラスが付いており、タイトルボックスはh2.img-blur-innerです。

※２枚目のblurがかかった背景画像は、.img-blur:beforeで設定しています。

※高さは固定ですので、heightやpaddingの数値でボックスの大きさや位置を調整してください。  

.pageimage {
  height: 500px;
}
.img-blur {
width: 100%;
height: 500px;
padding: 150px 25%;
}
h2.img-blur-inner {
display: block;
position: absolute;
width: 50%;
top:130px;
left: 25%;
height: 200px;
border: solid 1px rgba(255,255,255,.2);
box-shadow: 0px 2px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0px 2px 5px rgba(#000,.6);
font-size: 40px;
text-align: center;
padding-top: 75px;
text-shadow: 0 1px 5px #000;
color: #fff;
}

.img-blur:before {
    content: "";
    background: inherit;
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 500px;
    padding: 150px 25%;
    top: 0px;
    left:0px;
    -webkit-filter: blur(7px);
    filter: blur(7px);
}

p {
  text-align: center;
  margin: 100px 10%;
  line-height: 2;
  font-size: 2em;
}

/* If you want more decoration on glass */
h2.img-blur-inner {
background-image: url(http://goo.gl/5b2XxL),url(http://goo.gl/5HzKMk);
background-repeat: no-repeat,no-repeat;
background-size: contain,contain;
background-position: top left,bottom right;
}

/* for smartphone and so on  */
@media (max-width: 768px) {
.pageimage {
  height: 250px;
}
.img-blur {
width: 100%;
height: 250px;
padding: 75px 10%;
}
h2.img-blur-inner {
display: block;
position: absolute;
width: 80%;
top:55px;
left: 10%;
height: 100px;
font-size: 28px;
text-align: center;
padding: 30px 0px 0px;
}

.img-blur:before {
    content: "";
    background: inherit;
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 250px;
    padding: 75px 10%;
    top: 0px;
    left:0px;
    -webkit-filter: blur(7px);
    filter: blur(7px);
} 
}