モダンブラウザで試すcss3（曇りガラス風の背景と文字の透過）

最近よく見かける、曇りガラス風の背景や透過された文字。
気になりつつも実装したことがなかったので、
色々試してみました。

##文字にマスクをかける

background-clip: text;を使えば、
背景を文字の形で切り抜いたようなマスクをかけることが出来ます。

<p data-height="265" data-theme-id="0" data-slug-hash="ebPrYK" data-default-tab="css,result" data-user="kfunnytokyo" data-pen-title="ebPrYK" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/ebPrYK/">ebPrYK</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

*必ずベンダープレフィックス-webkit-が必要で、IEは未対応。

##s○preme風

bodyとコンテンツ、別々の背景を指定してあげれば、
こんなデザインもあっという間。

<p data-height="265" data-theme-id="0" data-slug-hash="MZPXgd" data-default-tab="css,result" data-user="kfunnytokyo" data-pen-title="CSS3 background-clip" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/MZPXgd/">CSS3 background-clip</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#曇りガラス風のぼかしをかける

filter: blur();を使えば、
画像にぼかしをかけることが出来ます。

背景だけにぼかしをかけたい場合には、
::before(::after)擬似要素にかけることを忘れてはいけません！
要素自体にかけてしまうと、
中にあるテキストなどの要素にも全て適応されちゃいます。

<p data-height="265" data-theme-id="0" data-slug-hash="REeJWL" data-default-tab="css,result" data-user="kfunnytokyo" data-pen-title="CSS3 " class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/REeJWL/">CSS3 </a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

さらに、このままではフチ部分がぼやけてしまうので、
少し修正します。

blurのpx分だけ、
要素の幅と高さ広げてあげます。
今回は、positionも設定しているので、
位置の修正も忘れずに！

<p data-height="265" data-theme-id="0" data-slug-hash="vvVrgW" data-default-tab="css,result" data-user="kfunnytokyo" data-pen-title="CSS3 background-clip" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/vvVrgW/">CSS3 background-clip</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

さらに、曇りガラス風のボックスに透過させた文字を載せてみます。

<p data-height="265" data-theme-id="0" data-slug-hash="wRYXdQ" data-default-tab="css,result" data-user="kfunnytokyo" data-pen-title="CSS3 background-clip" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/wRYXdQ/">CSS3 background-clip</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これは、さすがに読みにくいですね。笑

先程の画像はさておき。笑
色々な組み合わせで、
こんなデザインもcssだけで作ることが出来ちゃいます！

<p data-height="265" data-theme-id="0" data-slug-hash="bvRMRN" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css3 - Frosted glass and text penetration" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/bvRMRN/">Css3 - Frosted glass and text penetration</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p data-height="265" data-theme-id="0" data-slug-hash="mxwjKL" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Css3 - Frosted glass and text penetration" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/mxwjKL/">Css3 - Frosted glass and text penetration</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

*background-clip: text;は必ずベンダープレフィックス付きで使うこと。IEには未対応。

*filter:blur();はIE,firefoxで未対応。

色々遊べて楽しいcss3ですが、
モダンブラウザのみで対応しているものが多いので、
使う際には必ず事前にチェックすることを忘れずに！