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);