HTML / CSS / jQuery コーディング

【CSS】text-shadow について


「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%で指定します。

スマホサイトで使用すれば、あまり画像を使わなくてもデザイン出来そうです。

 

-HTML / CSS / jQuery コーディング
-,

© 2026 Web担当屋 ブログ