スタイルシートに色違いの文字列を設定し、重ね具合を工夫すると、文字を立体的に表現することができます。ここでは、３つの色違いの文字列をずらして重ねることで、背景に肩押ししたような文字を表示させる方法を考えてみましょう。
重ねる３つの文字列のサイズや配置位置を設定します。
<DIV STYLE="position:absolute; left:121; top:171; font-size:50pt; color:#ffffff; z-index:2; background-color: #66CC00; layer-background-color: #66CC00; border: 1px none #000000;">HEllO !</DIV>
<DIV STYLE="position:absolute; left:119; top:169; font-size:50pt; color:#008800; z-index:1; background-color: #66CC00; layer-background-color: #66CC00; border: 1px none #000000;">HEllO !</DIV>
<div style="position:absolute;left:120px;top:170px;font-size:50pt;color:#66cc00; z-index:3;">HEllO !</div>例では、スタイルシートに設定した3色の文字列を少しずつずらして重ねることで立体的なタイトル文字を作成しています。型押ししたような立体感をつけるには、背景色と同色の文字列の背後に、同系色の濃淡色の文字を対称的にずらして重ねることがポイントです。このように配置すると、文字の輪郭に位部分と明るい部分が作成され、凸凹ができたように見せかけることができます。
なお、例の背後の２つの文字列のずらす位置を逆にすると、背景から盛り上がったように表示することができます。ここでは、レイヤーを使って文字列を重ね合わせているので、レイヤーの重ねあわせ順（z-index）を変更するだけで違った見え方になります。