CSSだけで文字にドロップシャドウをつける方法(あまり良くない方法)

SPONSORED LINK

Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。

» Good-Looking, Sharp Offset, CSS Text Styling

実例はこちら。

nicecsstext1.png

↑ 適用前。

nicecsstext2.png

↑ 適用後。かっくいい。

やり方はいわれてみれば簡単で、1pxずらして影をつけただけ(というか影を先に書くのか)。

実際のコードは以下のような感じですね。スタイルシートには次のように記述します。

h1 {
color: #000;
position: relative;
}
h1 span {
color: #fff;
display: block;
position: absolute;
top: -1px;
left: -1px;
}

実際のHTMLの方はこんな感じ。

<h1><span>Lorem Ipsum</span>Lorem Ipsum</h1>

ちょっと画像を作るのが面倒、というときによいかもしれませんね。

追記(2006-11-27):

たくさんの方からコメントいただきありがとうございました。アクセシビリティ、SEO等の観点からこの手法にはいろいろ問題があることがわかりました・・・軽率な掲載でしたが勉強になりました・・・。ご利用される方はコメント欄をご覧の上、欠点がわかった上でご利用ください。

SPONSORED LINK

このエントリーを共有する

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