最近よく見かける、曇りガラス風の背景や透過された文字。
気になりつつも実装したことがなかったので、
色々試してみました。
##文字にマスクをかける
background-clip: text;を使えば、
背景を文字の形で切り抜いたようなマスクをかけることが出来ます。
See the Pen ebPrYK by kayukihashimoto (@kfunnytokyo) on CodePen.
*必ずベンダープレフィックス-webkit-が必要で、IEは未対応。
##s○preme風
bodyとコンテンツ、別々の背景を指定してあげれば、
こんなデザインもあっという間。
See the Pen CSS3 background-clip by kayukihashimoto (@kfunnytokyo) on CodePen.
#曇りガラス風のぼかしをかける
filter: blur();を使えば、
画像にぼかしをかけることが出来ます。
背景だけにぼかしをかけたい場合には、
::before(::after)擬似要素にかけることを忘れてはいけません！
要素自体にかけてしまうと、
中にあるテキストなどの要素にも全て適応されちゃいます。
See the Pen CSS3 by kayukihashimoto (@kfunnytokyo) on CodePen.
さらに、このままではフチ部分がぼやけてしまうので、
少し修正します。
blurのpx分だけ、
要素の幅と高さ広げてあげます。
今回は、positionも設定しているので、
位置の修正も忘れずに！
See the Pen CSS3 background-clip by kayukihashimoto (@kfunnytokyo) on CodePen.
さらに、曇りガラス風のボックスに透過させた文字を載せてみます。
See the Pen CSS3 background-clip by kayukihashimoto (@kfunnytokyo) on CodePen.
これは、さすがに読みにくいですね。笑
先程の画像はさておき。笑
色々な組み合わせで、
こんなデザインもcssだけで作ることが出来ちゃいます！
See the Pen Css3 - Frosted glass and text penetration by kayukihashimoto (@kfunnytokyo) on CodePen.
See the Pen Css3 - Frosted glass and text penetration by kayukihashimoto (@kfunnytokyo) on CodePen.
*background-clip: text;は必ずベンダープレフィックス付きで使うこと。IEには未対応。
*filter:blur();はIE,firefoxで未対応。
色々遊べて楽しいcss3ですが、
モダンブラウザのみで対応しているものが多いので、
使う際には必ず事前にチェックすることを忘れずに！