[CSS]背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート

サイト構築 -CSS

Post on:2013年11月11日

sponsorsr

レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。

Dynamic Inside Blur Pure CSS
デモページ

細部もとっても美しくスタイルされています。

パネルの細部もキレイ！

ブラーの量やコンテンツの色も絶妙のバランスで、可読性も確保されてますね。

スクロールしてもキレイ！

上記のデモではパネル内に、フォームやリストなどさまざまな要素が配置されているので、最低限の要素のみにしてみました。

最低限の要素にしたデモ

実装は、こんな感じになります。

HTML

パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。

<body>
  
<article>
<h1>半透明の美しいパネル</h1>
<p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ごくまれに〈ウヰスキー〉という書き方を見かけるが、これとて差別化を意図したものではなく単にカナづかいの時代性にすぎない。
　現在、カナ表記は〈ウイスキー〉に一本化しており、そこに国産・舶来の区別はない。最近は価格面での差もちぢまり、20年前に ￥10,000 だった本場のスコッチが半値近くになるなど、ウイスキーは一層ポピュラーなものになってきた。しかし、消費量についていえば、洋酒のトップは何といってもビールだろう。よっぽどの下戸はともかく、まず誰でもタシナミ程度には口にする。</p>
</article>

<svg version="1.1" xmlns='http://www.w3.org/2000/svg'>
 <filter id='blur'>
   <feGaussianBlur stdDeviation='6' />
   </filter>
</svg>

</body>

CSS

美しい半透明のパネルのスタイルです。
パネル内の見出しやテキストのスタイルは省略しています。

<style>
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border: 0 none;position: relative;}

html {
  background: url(http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
  font-family: roboto;
  font-weight: 100;
  overflow-y: scroll;
}
body {
  width: 100%;
  min-height: 100%;
  background: inherit;
  overflow: hidden;
}
article {
  background: inherit;
  position: relative;
  width: 60%;
  margin: 10vh auto 15vh;
  border-radius: 15px;
  border: 10px solid rgba(255,255,255,.15);
  box-shadow: 1px 1px 4px rgba(0,0,0,.3);
  z-index: 5;
  font-size: 1.4rem;
}
article:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
  background: inherit;
  filter: blur(5px);
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: url(#blur);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='6');
}

svg {
  height:0;
  width: 0;
  position: absolute;
}
</style>