ぼかしテキスト

qnyp を開いたらネタバレを含む感想のテキストがぼかされて見えずらくしてあった。

あまり Web では見ない表現ではじめは驚いたけど、ネタバレ文章のように内容が読み解かれてはいけないけど文章量などの情報をなんとなく見せたいとき、ぼかしテキストはなかなか良さそうだと思った。

テキストのぼかしは CSS で行われていて、文字の塗りを透明にしてテキストシャドウでぼんやり文字の輪郭を取ってる。

Demo: http://jsfiddle.net/thleap/1hprth4f/

.blur-text {
  text-shadow: 0 0 7px rgba(0,0,0, .7);
  color: rgba(255,255,255, 0);
}

ちなみにぼかし量をピクセルで指定してるので、大きな文字では文字サイズに対するぼかし具合が弱く、このままのスタイルでは同じ効果は得られない。

使う場面があるかどうかは別として、ぼかし量を em で指定してすると文字サイズに合わせてスタイルを変更する必要はなくなりそう。

Demo: http://jsfiddle.net/thleap/1hprth4f/2/

/* text-shadow の 3番目の値を em で指定 */
.blur-text02 {
  text-shadow: 0 0 .5em rgba(0,0,0, .7);
  color: rgba(255,255,255, 0);
}