今回は【CSS】text-shadowを解説! テキストに影をつけよう!
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
text-shadow
の使い方について学びたい方へ - 今回はtext-shadow(影)の指定方法についての記事になります
今回は、text-shadowについての解説になります。
text-shadowとは、テキストに対して影を追加できます。
box-shadowとは、要素に対して影を追加できます。
以前、box-shadowについての解説記事を書きましたので、
一度こちらの記事で理解度を深めておきましょう。
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)(黒)」の指定をしています。
個人的な意見になりますが、日本語に影を複数した場合は、見えにくくなります。
複数指定する場合は、英語または数字の場合をおすすめします。
<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);
}
まとめ
今回はこれで以上です。
- POINT
-
text-shadow
とはテキストに対して影を追加できます。 -
box-shadow
とは、要素に対して影を追加できます。 - ①長さ(水平方向 垂直方向) ②ぼかす半径 ③色の順に指定をおこないます。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事