#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. text-style3

Drop shadow text

文字に影を付ける

text-shadowプロパティを使用すると、テキストに影をつけることができます。
4つの値を半角スペースで区切り、影の伸びる方向と距離の値2つと影をぼかす範囲の値、影の色を指定します。
1つ目の値は水平方向(横方向)の距離、2つ目の値は垂直方向(縦方向)の距離、どちらも正の数以外に負の数(マイナス)で設定することができます。正数は水平方向は右、垂直方向は下に影が付き、負の数は水平方向は左、垂直方向は上に影が付きます。
3つ目の値は影のぼかし半径、影の色の部分に色コードやカラーネームを入れます。

text-shadow: 水平方向の位置 垂直方向の位置 影をぼかす半径 影の色;

例1-1:太字の文字に紫の影を付ける

例1-2:太字の文字に紫の影を付ける。(紫の影の透明度は0.6)

太字の<strong class="sample1-1(sample1-2)">文字に紫の影を付ける</strong>。
.sample1-1{
   text-shadow: 2px 2px 1px #cc66cc;
}
.sample1-2{
   text-shadow: 2px 2px 1px rgba(204,102,204,0.6);
}

例1-1と例1-2は同じHTMLタグですが、CSSで カラーコード(16進数)からrgba()に変更し、透明度(0.6)を指定しているので薄い色になっています。

複数の影を付ける

SAMPLE 2

.sample2{
  text-shadow: 5px 7px 3px #009999, 11px 13px 3px #999999;
}

カンマで区切ることにより、1つの文字に対して複数の影を付けることができます。

その他のサンプル

SAMPLE 3

.sample3{
   color: #3366cc;
   text-shadow:1px 1px 0 #ffffff, 2px 2px 0 #3366cc;
}

SAMPLE 4

.sample4 {
  color: #dddddd;
  text-shadow: 0 2px 0 #999999, 0 3px 0 #999999, 0 4px 5px #666666;
}

SAMPLE 5

.sample5 {
  color: #ffffff;
  text-shadow: 0 0 7px #ff6666;
}

SAMPLE 6

.sample6 {
  color: #0099cc;
  text-shadow: 2px 1px 0px #ff9900, 3px 2px 3px #999999;
}

SAMPLE 7

SAMPLE 8

.sample7{
  background-color: #ffbbbb;
  color: #ffffff;
  text-shadow: 0px 3px 0px #c2a0a6, 6px 6px 6px #000000;
}
.sample8{
  background-color: #ffbbbb;
  color: #ffffff;
  text-shadow: 0px 3px 0px #c2a0a6, 6px 6px 6px rgba(0,0,0,0.8);
}

sample7とsample8は、text-shadowで影の色(16進数 #000000)をRGBA(rgba(0,0,0,0.8)#000000の80%)で影の透明度を変えています。

RGBAについてと数値取得ツールがDesignTipsの『RGBA変換ツール』のページに有るのでご利用下さい。