2690

CSS3で無難に使えそうなtext-shadow設定

CSS3で無難に使えそうなtext-shadow設定

2010.5.18

CSS3になって、text-shadowが使えるようになりましたね。
ブラウザの問題はさておき、現実的に使おうと思った時にセンスよく使いたいですよね。 個人的にどんなデザインでも汎用的に使えそうな、オーソドックスなパターンを作ってみました。

基本的には、「微妙に設定されているか、されていないか」くらいがオシャレかなと思っています。デザインは適宜追加していきたいなと思います。

微妙に白シャドウがかかっている

text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
text-shadow: 0px 1px 0px rgba(255,255,255,0.7);

品良くぼかす

text-shadow: 0px 1px 2px rgba(0,0,0,0.8);
text-shadow: 0px 1px 2px rgba(0,0,0,0.8);

白い背景で一般的なテキストで使うイメージ

使っても見出しレベルでしょうね。

text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
text-shadow: 0px 1px 2px rgba(0,0,0,0.2);

参考