スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テキストにドロップシャドウで読みやすく

テキストを読みやすくするために、背景色に対して適当な色でグローをかけることがありますが、このグローがどうも苦手でなかなか効果的に設定することができません。そこで、ドロップシャドウを少しだけかけてみると読みやすくなったので、しばらくはこの方法で行ってみようかなという話。

白背景に黒文字の組み合わせに、薄いグレーでドロップシャドウ

テキストドロップシャドウ1

濃いグレーの背景に白文字の組み合わせに、黒でドロップシャドウ

テキストドロップシャドウ2

グレーの背景に黒文字の組み合わせに、白でドロップシャドウ

テキストドロップシャドウ3

どれも上がノーマルな状態で、下がドロップシャドウをかけた状態です。わずかですが、下の方が読みやすくなっているように感じます。特に、白文字に黒のドロップシャドウと、黒文字に白のドロップシャドウがいいと思います。

ドロップシャドウは下図のように、ぼかしは0に設定しています。

テキストドロップシャドウ

テキストを画像として扱う場合には極力設定するようにしようと思います。画像ではなく、テキストの場合は CSS3 の text-shadow を設定すると同様の効果が得られますね。

CSSの text-shadow プロパティで設定

テキストにドロップシャドウをかけて読みやすくするテスト。

テキストにドロップシャドウをかけて読みやすくするテスト。

テキストにドロップシャドウをかけて読みやすくするテスト。

text-shadow の設定は下記のような感じです。

p {
  text-shadow: 1px 1px #fff;
}

画像にしてもテキストにしても、ちょっとした設定ですが効果的でよさそうです。個人的に気に入っているので、使い過ぎて逆効果にならないよう注意しながら試していこうと思います。

---------------------------------- 2010/08/24 追記 -----------------------------------

text-shadow のカラー指定をRGBaで行う

上記では text-shadow にRGBでカラーを指定していました。[mezzoblue § A CSS3 Tip]で、カラー指定をRGBaで行うと手軽で効果的に text-shadow の設定ができると紹介されていたので試してみます。

テキストにドロップシャドウをかけて読みやすくするテスト。

テキストにドロップシャドウをかけて読みやすくするテスト。

テキストにドロップシャドウをかけて読みやすくするテスト。

p {
  text-shadow: rgba(0, 0, 0, 0.2) 1px 1px;
}

20%に透過した影がつきました。見やすくなるかは背景色によりますが、影の色を考えなくていいので手軽でいいかも知れません。

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。