概要へ移動

簡単な例。

CSS : 例
.sample1  {

    text-shadow:    1px 1px 3px red;

}



.sample2  {   

    color:          white;

    font-weight:    bold;

    text-shadow:    1px 1px 1px black,

                    0   0   9px orangered;

}
実行結果
sample1
sample2

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

右に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
左に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
下に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
上に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
影の広がり
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
影の色
sample1
sample2
複数指定
sample1
sample2
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
div {

  font-size: 2em; /*  文字の大きさ */

}
HTML : 適用するHTML
<div class="sample1">sample1</div>

<div class="sample2">sample2</div>
実行結果
sample1
sample2

text-shadowの概要

text-shadowは文字列に影をつける。ボックスに影をつけるのはbox-shadowである。

CSSプロパティ影をつける対象
text-shadow文字列
box-shadowボックス

text-shadowには４つの引き数が必要である。第一～第三引き数は数値であり、第四引き数はカラーコードである。

引き数の順番設定値
１ ～ ３数値（＋ 単位）
４カラーコード

各引き数の設定する内容は以下。

引き数の順番設定する内容設定値マイナスの設定
第一引き数水平方向（左右）の位置数値（＋ 単位）可
第二引き数垂直方向（上下）の位置数値（＋ 単位）可
第三引き数影の広がり数値（＋ 単位）不可
第四引き数影の色カラーコード-
順番を変えることができる

順番を代えて、第一引き数をカラーコードにして、第二～第四引き数を数値にすることもできる。

引き数の順番設定値
１カラーコード
２ ～ ４数値（＋ 単位）
引き数の順番設定する内容設定値マイナスの設定
第一引き数影の色カラーコード-
第二引き数水平方向（左右）の位置数値（＋ 単位）可
第三引き数垂直方向（上下）の位置数値（＋ 単位）可
第四引き数影の広がり数値（＋ 単位）不可

順番を変えた実験。

CSS : 設定の順番を変更
.sample1 {    text-shadow:    1px  2px 3px red;  }

.sample2 {    text-shadow:    red 1px  2px 3px ;  }
順番を変更した結果
sample1
sample2

ただし順番を代えると説明がややこしいので、以下では「第一～第三引き数は数値、第四引き数はカラーコード」で説明する。

(1) 横方向の位置

第一引き数だけを変更してみる。 大きくなるにつれ、影が右にずれていく。

CSS : 第一引き数
.px0     { text-shadow:    0    0 2px red ; }

.px1     { text-shadow:    1px  0 2px red ; }

.px2     { text-shadow:    2px  0 2px red ; }

.px3     { text-shadow:    3px  0 2px red ; }

.px4     { text-shadow:    4px  0 2px red ; }

.px5     { text-shadow:    5px  0 2px red ; }

.px6     { text-shadow:    6px  0 2px red ; }

.px7     { text-shadow:    7px  0 2px red ; }

.px8     { text-shadow:    8px  0 2px red ; }

.px9     { text-shadow:    9px  0 2px red ; }

.px10   { text-shadow:    10px 0 2px red ; }
HTML : 適用するHTML
<div class="px0"    >0px</div>

<div class="px1"    >1px</div>

<div class="px2"    >2px</div>

<div class="px3"    >3px</div>

<div class="px4"    >4px</div>

<div class="px5"    >5px</div>

<div class="px6"    >6px</div>

<div class="px7"    >7px</div>

<div class="px8"    >8px</div>

<div class="px9"    >9px</div>

<div class="px10"   >10px</div>
右に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
マイナス値

マイナス値も指定可能。マイナスにすると、左にずれていく。

CSS : マイナス値の指定
.px0     { text-shadow:     0    0 2px red ; }

.px1     { text-shadow:    -1px  0 2px red ; }

.px2     { text-shadow:    -2px  0 2px red ; }

.px3     { text-shadow:    -3px  0 2px red ; }

.px4     { text-shadow:    -4px  0 2px red ; }

.px5     { text-shadow:    -5px  0 2px red ; }

.px6     { text-shadow:    -6px  0 2px red ; }

.px7     { text-shadow:    -7px  0 2px red ; }

.px8     { text-shadow:    -8px  0 2px red ; }

.px9     { text-shadow:    -9px  0 2px red ; }

.px10   { text-shadow:    -10px 0 2px red ; }
左に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

(2) 縦方向の位置

第二引き数だけを変更してみる。 大きくなるにつれ、影が下にずれていく。

CSS : 第二引き数
.px0     { text-shadow: 0 0    2px red ; }

.px1     { text-shadow: 0 1px  2px red ; }

.px2     { text-shadow: 0 2px  2px red ; }

.px3     { text-shadow: 0 3px  2px red ; }

.px4     { text-shadow: 0 4px  2px red ; }

.px5     { text-shadow: 0 5px  2px red ; }

.px6     { text-shadow: 0 6px  2px red ; }

.px7     { text-shadow: 0 7px  2px red ; }

.px8     { text-shadow: 0 8px  2px red ; }

.px9     { text-shadow: 0 9px  2px red ; }

.px10   { text-shadow: 0 10px 2px red ; }
下に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
マイナス値

マイナス値も指定可能。マイナスにすると、上にずれていく。

CSS : マイナス値の指定
.px0     { text-shadow: 0  0    2px red ; }

.px1     { text-shadow: 0 -1px  2px red ; }

.px2     { text-shadow: 0 -2px  2px red ; }

.px3     { text-shadow: 0 -3px  2px red ; }

.px4     { text-shadow: 0 -4px  2px red ; }

.px5     { text-shadow: 0 -5px  2px red ; }

.px6     { text-shadow: 0 -6px  2px red ; }

.px7     { text-shadow: 0 -7px  2px red ; }

.px8     { text-shadow: 0 -8px  2px red ; }

.px9     { text-shadow: 0 -9px  2px red ; }

.px10    { text-shadow: 0 -10px 2px red ; }
上に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

(3) 影の広がり

第三引き数だけを変更してみる。 大きくなるにつれ、影がにじんでいく。

CSS : 第三引き数
.px0     { text-shadow: 0 0 0    red ; }

.px1     { text-shadow: 0 0 1px  red ; }

.px2     { text-shadow: 0 0 2px  red ; }

.px3     { text-shadow: 0 0 3px  red ; }

.px4     { text-shadow: 0 0 4px  red ; }

.px5     { text-shadow: 0 0 5px  red ; }

.px6     { text-shadow: 0 0 6px  red ; }

.px7     { text-shadow: 0 0 7px  red ; }

.px8     { text-shadow: 0 0 8px  red ; }

.px9     { text-shadow: 0 0 9px  red ; }

.px10    { text-shadow: 0 0 10px red ; }
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

これにマイナス値を設定することはできない。

(4) 影の色

カラーコード で指定する。

CSS : 色
.sample1  {

    text-shadow: 0 0 2px #ff8400;

}



.sample2  {

    text-shadow: 0 0 2px #f80;

}
実行結果
sample1
sample2

複数の影の指定

複数の影を指定する場合、カンマ（,）でつなげる。

CSS : 第四引き数
.sample1 {

    text-shadow:    2px  1px 3px yellow,

                   -2px -1px 3px green;

}



.sample2 {

    color:          white;

    font-weight:    bold;

    text-shadow:    1px 1px 1px black,

                    0   0   9px orangered;

}
実行結果
sample1
sample2

Emmet : tsh

記述Visual Studio Code
tshtext-shadow: hoff voff blur #000;