【CSS】text-shadowを解説！テキストに影をつけよう！

シュウ

今回は【CSS】text-shadowを解説！テキストに影をつけよう！
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
text-shadowの使い方について学びたい方へ
今回はtext-shadow(影)の指定方法についての記事になります

今回は、text-shadowについての解説になります。
text-shadowとは、テキストに対して影を追加できます。
box-shadowとは、要素に対して影を追加できます。

以前、box-shadowについての解説記事を書きましたので、
一度こちらの記事で理解度を深めておきましょう。

box-shadowの記事

【CSS】box-shadowで指定方法を学び要素に影をつけてみよう！

box-shadowの基本的な使い方についての記事になります。

[記事の内容]

text-shadowについて

text-shadowとは、テキストに対して影を追加できます。
書き方は以下のようになります。

要素 {text-shadow: 長さ ぼかす半径 色};

指定できる値

長さ
none 影を追加しません。
数値と単位 「4px」のように影の長さを数値と単位で指定できます。
「4px 5px」のように半角スペースで区切ると「水平方向垂直方向」に指定ができます。
マイナスの値も可能
ぼかす半径
数値と単位 「5px」のように影のぼかしを数値と単位で指定できます。
色
カラー キーワード、またはカラーコードを指定します。

ポイント！
text-shadowで指定する際には必ず半角スペースで区切りを入れて指定しましょう！

text-shadow指定方法について

ここから、指定方法について解説していきます。

水平方向垂直方向のみでの影の指定方法

「赤色」では、水平方向垂直方向共に「3px」を指定し、右方向に影が伸びます。
「青色」では、水平方向垂直方向共に「-3px」を指定し、左方向に影が伸びます。
ただし、ぼかしの値、カラーの値を入力しないと文字が見えづらいので必ず、ぼかしの値、カラーの値を入力しましょう。

水平方向垂直方向のみでの指定

赤色とは

青色とは

<p class="text-shadow01">赤色とは</p>
<p class="text-shadow02">青色とは</p>

/*--赤色--*/
.text-shadow01 {text-shadow: 3px 3px;}

/*--青色--*/
.text-shadow02 {text-shadow: -3px -3px;}

ぼかしの指定方法

「赤色」では、ぼかしの値「3をpx」を指定しています。
「青色」では、水平方向、垂直方向それぞれ影の値を0にし全体のぼかしの値「20px」に指定しています。
数値の値が大きいほど影のぼかしが強くなります。

ぼかしの指定

赤色とは

青色とは

<p class="text-shadow03">赤色とは</p>
<p class="text-shadow04">青色とは</p>

/*--赤色--*/
.text-shadow03 {text-shadow: 3px 3px 3px;}

/*--青色--*/
.text-shadow04 {text-shadow: 0px 0px 20px;}

カラーの指定方法

「赤色」では、色の値「red キーワード」を指定しています。
「青色」では、色の値「#1362b7 カラーコード」を指定しています。
「緑色」では、色の値「rgba(19,183,38,0.5) 透明度」を指定しています。

カラーの指定

赤色とは

青色とは

緑色とは

<p class="text-shadow05">赤色とは</p>
<p class="text-shadow06">青色とは</p>
<p class="text-shadow07">緑色とは</p>

/*--赤色--*/
.text-shadow05 {text-shadow: 3px 3px 3px red;}

/*--青色--*/
.text-shadow06 {text-shadow: 3px 3px 3px #1362b7;}

/*--緑色--*/
.text-shadow07 {text-shadow: 3px 3px 3px rgba(19,183,38,0.5);}

覚えておきましょう！
rgba(数値01,数値02,数値03,透明度)
数値01にはredの赤の数値、数値02にはgreenの緑の数値、数値03にはblueの青の数値
数値についてはrgb(「0～255」,「0～255」,「0～255」)になります。
透明度については0（透明）～1（不透明）になります。

複数の影を指定する方法

影はカンマ(,)で区切る事で複数指定できます。
複数指定する事で、影の方向、ぼかし、カラーの複数の指定も可能です。
右方向に「#fff(白)」、左方向に「rgba(0,0,0,0.5)(黒)」の指定をしています。

個人的な意見になりますが、日本語に影を複数した場合は、見えにくくなります。
複数指定する場合は、英語または数字の場合をおすすめします。

複数の影を指定する方法

COLOR

<p class="text-shadow08">COLOR</p>

/*--赤色--*/
.text-shadow08 {
	color: #fd5e5a;
	text-shadow:  4px 3px 4px #fff, -9px -8px 4px rgba(0,0,0,0.5);
}

ボタンにぼかしをいれる

最後にbox-shadowを指定しボタンのデザインをしております。
ご参考程度に

rgbaを指定し「ぼかし」のようなボタンにします。
box-shadowでの水平方向、垂直方向、影のぼかし、色(rgba)の4種のみでの指定になります。

ぼかしのボタン

ボタン

<a href="#" class="btn01">ボタン</a>

.btn01 {
	padding: 20px 100px;
	display: inline-block;
	color: #333;
	text-decoration :none;
	text-align: center;
	background: #ffbf4b;
	transition: .4s;
	
	/*--水平方向 垂直方向 影のぼかし 色--*/
	box-shadow: 10px 10px 10px rgba(0,0,0,0.3);  
	
	/*--角丸指定--*/
	border-radius: 100vh;
}

.btn01:hover {

	/*--水平方向 垂直方向 色--*/
	box-shadow: 0 0 10px rgba(0,0,0,0);
}

box-shadowの記事