STR STORAGE | Entry | content生成で影を付ける

概要

極力無理の無いHTMLソースで、テキストを重ねてドロップシャドウ（っぽい）効果を演出する。

ソースコード

HTML

<h1 title="Text Shadow">
 Text Shadow
</h1>

CSS

h1
{
color:#666666;
}
 h1:after
 {
 margin:-1.6em 0px 0px -2px;
 display:block;
 content:attr(title);
 color:#000000;
 }

デモページを作成してみました。

HTML解説

title属性で中身のテキストと同じ文章を記述している事が重要です。まぁ無理にtitle属性である必要性は無いのですが、一番不自然で無いアトリビュートなのでここではtitleとしています。

CSS解説

h1に対する色指定に注意して下さい。h1側の色指定を影（後ろ）の色として利用しています。after擬似クラスの流れは以下の通りです。

1. 1.content:attr(title);でtitle属性の中身を複製する。
2. 2.複製されたテキストが本体の右側に描画されるので、display:block;で一段下に落とす。
3. 3.ネガティブマージンを使い、上方向に約一文字分、左方向に数ピクセルずらす。

マージンの指定についてですが、上方向にはline-heightより僅かに大きい値を入力する事で本体テキストとずらす事が出来ます。ピクセル指定ではユーザーによるフォント拡縮時にずれ幅が変動しません。左方向はピクセル指定で問題無いと思います。移動させたい分だけ入力。実はこちらの複製されたテキストがレイヤー前面なので、color指定で本体より濃い色を指定しています。この辺りはデザインと相談で。

対応ブラウザ

Netscape7.1・Firefox・Opera・Safariで意図通りのレンダリングをしました。IEにはfilter:shadow();があるので、セレクタハックを駆使して上手い事振り分けてやればまぁ使えなくも無いかなと言った所です。Safariに関してはtext-shadowを使う事をお薦めします。こんな偽影より遥かに自然で綺麗なドロップシャドウを描画してくれます。

問題

Opera以外ではテキスト選択出来ません。これはcontentで生成されたテキストが前面に来ている為です。

「after擬似クラスでエイリアスを上に上げる方法」とは逆の、「before擬似クラスでエイリアスを下に下げる方法」であれば、この不具合は解消しますが、テストしてみた所ボックス計算が上手く行きませんでした。擬似クラス内でpositionが使えればボックスを浮かせられるので実現出来そうですが。