「text-shadow」はCSS3のプロパティで、テキストに影を付けられます。
「text-shadow」の後のスペース区切りで横方向、縦方向、影のぼかし半径、影の色を指定できます。
また、カンマ( , )で区切って複数の影を指定することもできます。
今回の例は、2つの影を指定して、立体感のあるテキストにしてみました。
◆HTML
<h1>TITLE見出しなどに適用するとどうでしょうか</h1>
◆CSS
h1 {
color: #993300;
text-shadow: 0 2px 0 #fff, 0 4px 0 rgba(0,0,0,0.15);
}
サンプルで使用している「rgba()」は、R(red)G(green)B(blue)A(alpha:透明度)で色を指定する際に使用します。RGBの色は0-255、または、0%-100%で指定します。
スマホサイトで使用すれば、あまり画像を使わなくてもデザイン出来そうです。