CSSだけで文字をモザイク風にぼかす方法

投稿日: 2016/12/04  更新日: 2017/10/21

CSS 


CSSだけで文字をモザイク風にぼかす方法を教えます




文字をぼかすとは

ぼかす」とは、境界を曖昧にすること。「曖昧」とは、はっきりしないこと。

つまりは読みづらくすることです。


さじ加減が難しいですね。

読もうと思ったら読めるかも?!でもけっきょくは読めない……

そのくらいがちょうど良いかと思います。


先に断っておくと、今回は「CSSで文字をぼかす方法」です。

文字です。画像ではないですし背景でもないです。

PhotoshopやPowerPointではなく、CSSでやる方法です。


CSSだけでぼかすので、とてもお手軽簡単ですね。

ただし場合によってはPhotoshopのほうが良い場合もありますので、実際に検証してみてください。



実際にぼかしてみよう


論より証拠。実際のコードを下に書いてみます。

こんな感じになります。

CSSだけで文字をモザイク風にぼかす方法 - サンプル -

color: transparent;
text-shadow: 0 0 8px rgba(0,0,0,0.5);

色々なブラウザで表示して違いを比べてみてください。

IE以外はうまく動作していると思いますがいかがでしょう?


CSSの書き方

CSSコードは次の通りです。

color: transparent;
text-shadow: 0 0 8px rgba(0,0,0,0.5);

colorは文字色を指定するプロパティです。

それを transparent(透明)にしています。


text-shadowは文字に影を付けるプロパティです。


このコードのポイントは、文字色を透明にすること

透明で見えないものに影がある、というとなんだかおかしな感じですね。


各ブラウザの対応状況

Can I useを見ると、一応は実装しているみたいです。

IEで表示されないのは、組み合わせの問題でしょうね。

IEの言い分としては「文字色が透明なのに影があるのは変。」みたいな。
(予想です)


私は「あるプロパティは他のプロパティに影響を及ぼしてはならない」と考えていますのでIEの実装は不具合だと思います。

要素同士は「疎結合であるべき」という考え方です。


早くIEが他のブラウザに追いついて欲しいですね。


colorプロパティの各ブラウザ実装状況

colorプロパティの各ブラウザ実装状況

Can I use#css3-colors

text-shadowプロパティの各ブラウザ実装状況

text-shadowプロパティの各ブラウザ実装状況

Can I use#css-textshadow


どんなときに使う?

「こうやったらCSSでモザイク風にぼかせるよ!」なんて記事を書いておいて言うのもなんですが、このテクニックは果たしていつ使うのでしょうか?(笑)


Webサイトでも書類でもなんでも、見やすくなければいけません

このテクニックを知るより、伝え方が良くなるテクニックを先に学ぶほうが良い気もしますし。

あえて分からなくする必要はあるのでしょうか?


それは次で説明します。


あえて分かりにくくするメリット

分かりにくくなると、次に何が起こるでしょう?

少し考えてみてください。


考えてみましたか?


答えは出ましたか?


では、私の考えと照らし合わせてみてください。


私は「人は分かりにくくなると、それを分かろうとするもの」だと思います。

好奇心という言葉があります。

今この文章を読んでいるのも、元をたどれば好奇心から来たものですよね。


その好奇心を一番くすぐられるのは、「もう少しで分かりそう」なラインです。

ただし、自分の力では絶対分からないと感じたら興味がなくなってしまうところも特徴です。

そのラインを超えて分かった瞬間、人は喜びを感じるものだと私は考えます。


提供する側としては、ギリギリのラインは難しいですけど攻めがいがありますね。


CSSで文字をモザイク風にぼかしていた実例

私が見たことがある実例は、SEOの調査ツールを販売しているサイトでした。

無料で使用できる範囲と、有料で使用できる範囲が定められており、有料へ誘導するための仕掛けとして、モザイク風ぼかしが使われていましたね。


あまり正確には覚えていないですが、下のような感じでした。※イメージです

順位キーワード
1位 CSS
2位 CSS3
3位 xxx
4位 xxx

「3位以降を閲覧するには、有料会員登録してください。」みたいなメッセージ


良いポイントでぼかしの使い方をしているなと思います。

  • 無料ユーザにも有料の範囲がどこからどこまでか分かりやすい
  • 一部情報を見せることで、ぼかし部分を想像しようと思えばできる

まとめ

CSSでモザイク風にぼかす方法。いかがでしたでしょうか?


CSSを2行で書けるお手軽さ。

「もう少しで分かりそう」を表現して惹き込む。


ぜひ活用してみてくださいね。



このエントリーをはてなブックマークに追加     

profile
profile

洋ちゃん

@c5apple

システムエンジニアをしています。二児の父です。

夢は天井から床までビッシリ並んだ本棚のある書斎を作ること!