WEB デザイン

【コピペOK】CSSで実装する文字をモザイクで表示する

2022-08-05

記事内に商品プロモーションを含む場合があります

【コピペOK】CSSで実装する文字をモザイクで表示する
文字にモザイクをかけたい
選択した範囲だけをモザイクしたい

なんて人のための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ですが、数字が大きい程、文字が見えにくくなり、モザイクが荒くなります。

こちらもおすすめ >

  • 【コピペOK】CSSで実装するレスポンシブなカルーセル・スライダーを表示する
  • スマホ対応のツールチップ(Tooltip)をHTML・CSSで表示する方法
  • ワンクリックで表示可能なアコーディオン(折りたたみ)を記事内に補足で入れる方法
  • 【コピペOK】JavaScriptで実装する、ボタンクリックでモーダルウィンドウを表示する
  • 【コピペOK】シンプルなセルを目指すCSSで実装するテーブルデザイン
この記事が気に入ったら、サポートをしてみませんか?
  • この記事を書いた人

sunli

【FXで勝つには、量も質も大事。それとシンプルに考えること。】 FX 勝ち組トレーダーしか知らない必勝法をわかりやすくどういう目線で、リスクを最小限にして着実に結果を積み上げているのか、その方法を伝授しています。

-WEB, デザイン
-, ,