CSS3のtext-shadowを利用して立体感のある文字を表現することができる。 ベベル（立体的に角を切り取る）表現を実現するには、上左方向に1pxの明るい色を指定、そして右下方向に影をつける。
エンボス（浮き彫り）表現を実現するには、ベベル表現と逆の指定を行う。上左方向に影をつけ、右下方向にぼかしのない1pxの明るい色を指定する。ベベルの場合はぼかす範囲を少し広めにしたほうが立体感も出て見やすくなる。一方、エンボスを実現する場合は1pxにしたほうがそれらしく見える。
CSS
h1.shadow05 {
text-shadow:#fff -1px -1px 1px,#333 1px 1px 2px;
}
h1.shadow06 {
text-shadow:#333 -1px -1px 1px,#fff 1px 1px 1px;
}
h1.shadow05 span,
h1.shadow06 span {
font-size:3.0em;
}
HTML
<p>立体的に角を切り取る</p> <h1 class="shadow05"><span>確認用の文字</span>ベベル</h1> <p>浮き彫り</p> <h1 class="shadow06"><span>確認用の文字</span>エンボス</h1>
サンプル
立体的に角を切り取る
確認用の文字ベベル
浮き彫り