文字にモザイクをかけたい
選択した範囲だけをモザイクしたい
選択した範囲だけをモザイクしたい
なんて人のためのCSSで実装する文字をモザイクで表示する方法をご紹介します。
文字の上にブラーを載せているので見た目がスッキリしているにも関わらず、読者になんの文字が書いているのか興味がわくモザイクになっています。
コード量も少なく簡単に実装することができます。これらを実際のサンプルと交えて解説していきます。
モザイクのサンプル
人生に成功をもたらす4つのサイクル
経済⇄健康⇄愛情⇄◉◉
経済⇄健康⇄愛情⇄◉◉
どうでしょう。最後の答えが気になりませんか？
サンプルコード
HTML
今日のラッキーナンバーは<span class="text-blur">15</span>です！
CSS
/*以下のコードはモザイク*/
.text-blur {
color: transparent;
text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
モザイクのぼかす範囲（半径）を指定する方法
text-shadowにてぼかす範囲（半径）を指定して文字に影を付けます。
現在はtext-shadow: 0 0 8pxですが、数字が大きい程、文字が見えにくくなり、モザイクが荒くなります。
