東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

フェローズe-ラーニングログイン

シャドウを使ってテキストを立体表現する

「text-shadow」

「text-shadow」プロパティを使ってテキストに「影」をつけることができます。

shadow1

 

■text-shadow

テキストに影をつける。
スペース区切りで

<水平方向の距離>
<垂直方向の距離>
<影のぼかし半径>
<影の色>

を指定。
(単位はpxやemやex等)

それぞれの意味は

<水平方向の距離>

水平方向(横方向)の影のオフセット距離を指定。
(正の値なら右へ、負の値なら左へ影が移動)

<垂直方向の距離>

垂直方向(縦方向)の影のオフセット距離を指定。
(正の値なら下へ、負の値なら上へ影が移動)

<影のぼかし半径>(省略可能)

影のぼかし半径を指定。
省略された場合は0。
(ぼかし効果の境界までの距離のことですが厳密なアルゴリズムは定義されていない)

<影の色>(省略可能)

影の色を指定。
(省略された場合はブラウザが選択した色が使用される)

指定例は

text-shadow: 0px 0px 0 #fff;

となります。
ではとりあえず使ってみましょう。

.style{
color: #ff0000;
font-size: 100px;
text-shadow: 5px 5px 10px #000;
}

sample テキストにシャドウをかける(その1)

テキストの右5px、下5px(つまり右下)に10px幅にぼかしをかけた黒色(#000)の影をつけています。

また「,」(半角カンマ)で区切って複数のパラメータを指定することができます。
複数パラメータを使うことで、少し複雑な「影」も表現することが可能となります。

shadow2

.style{
color: #ff0000;
font-size: 100px;
text-shadow:
0px 0px 0 #fff,
1px 1px 0 #eee,
2px 2px 0 #ddd,
3px 3px 0 #ccc,
4px 4px 0 #bbb,
5px 5px 0 #aaa,
6px 6px 5px #999,
6px 6px 10px #f00;

}

sample テキストにシャドウをかける(その2)

傾きをかけてみる

「transform」

「transform」プロパティを使いテキストを傾けてみます。

shadow3

■transform:rotate(回転角度);

テキストを「回転角度」だけ時計回りに回転する。

sample テキストを回転する(その1)

テキストを時計回りに5度(5deg)傾けています。

.style{
font-size: 100px;
padding: 100px 0;

-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}

.style .red{
letter-spacing: -1px;
color: #ff3333;
text-shadow:
1px 1px #cc0000,
2px 2px #cc0000,
3px 3px #cc0000,
4px 4px #cc0000,
5px 5px #cc0000,
6px 6px #cc0000,
7px 7px #cc0000,
8px 8px 5px #ff0000;
}

.style .green {
color: #33ff33;
text-shadow:
1px 1px #00cc00,
2px 2px #00cc00,
3px 3px #00cc00,
4px 4px #00cc00,
5px 5px #00cc00,
6px 6px #00cc00,
7px 7px #00cc00,
8px 8px 5px #00ff00;
}

.style .blue {
color: #3333ff;
text-shadow:
1px 1px #0000cc,
2px 2px #0000cc,
3px 3px #0000cc,
4px 4px #0000cc,
5px 5px #0000cc,
6px 6px #0000cc,
7px 7px #0000cc,
8px 8px 5px #0000ff;
}

<div class=”style”>
<span class=”red“>R</span>
<span class=”green“>G</span>
<span class=”blue“>B</span>
</div>

ちょっとポップな感じになってきましたが、さらに「傾斜」をかけることで、より自然な感じ(斜めから俯瞰した感じ?!)にすることができます。

shadow5

sample テキストを回転する(その2)

「transform」に「skew」を追加します。

■transform:skew(X軸の傾斜角度,Y軸の傾斜角度);

2つの角度によってX軸とY軸に沿った傾斜変形を指定。
1番目はX軸の傾斜角度。
2番目はY軸の傾斜角度。(省略可能)
(Y軸傾斜角度を省略した場合は0となりY軸傾斜なし)

.style{
font-size: 100px;
padding: 100px 0;

-moz-transform: skew(-25deg) rotate(5deg);
-ms-transform: skew(-25deg) rotate(5deg);
-webkit-transform: skew(-25deg) rotate(5deg);
transform: skew(-25deg) rotate(5deg);
}

.style .red{
letter-spacing: -1px;
color: #ff3333;
text-shadow:
1px 1px #cc0000,
2px 2px #cc0000,
3px 3px #cc0000,
4px 4px #cc0000,
5px 5px #cc0000,
6px 6px #cc0000,
7px 7px #cc0000,
8px 8px 5px #ff0000;
}

.style .green {
color: #33ff33;
text-shadow:
1px 1px #00cc00,
2px 2px #00cc00,
3px 3px #00cc00,
4px 4px #00cc00,
5px 5px #00cc00,
6px 6px #00cc00,
7px 7px #00cc00,
8px 8px 5px #00ff00;
}

.style .blue {
color: #3333ff;
text-shadow:
1px 1px #0000cc,
2px 2px #0000cc,
3px 3px #0000cc,
4px 4px #0000cc,
5px 5px #0000cc,
6px 6px #0000cc,
7px 7px #0000cc,
8px 8px 5px #0000ff;
}

<div class=”style”>
<span class=”red”>R</span>
<span class=”green”>G</span>
<span class=”blue”>B</span>
</div>