東京北青山、大阪四ツ橋発、WEBディレクターのブログ

クッチーナ・トカシキーナ text-shadowをどこかで使ってみたくなったので

クッチーナ・トカシキーナ

text-shadowをどこかで使ってみたくなったので

CSSのtext-shadowプロパティ、CSS3で復活してたんですね。
当初のsafariのみの対応から、いつの間にかFirefoxやChrome、Operaなどのブラウザも対応するようになっていたようです。(IEは問題外)

IEが対応してないため、実際に案件で使用するには壁がありますが、
もしそのことを気にしないでよくなれば、テキスト周りでのデザインの幅も広がりそうですね。
javascript使えばIEでも同様の見え方を実装することもできるようですし。

という訳で、試しにこのエントリー内のテキストにtext-shadowを設定してみました。
IE以外のブラウザの新しめのバージョンでみるとシャドウってます。

color: #FFF;
text-shadow: 1px 1px 1px #1b1712;

【参照リンク】
ファーストクラスバックパッカー (綺麗に使ってます)
IEでCSS3のドロップシャドウを使いたい
HTML5やCSS3のブラウザ対応表