cssプロパティtext-shadowの説明

こんにちは tanaka です。

今回は、
cssプロパティ
text-shadow の説明です。

text-shadowとは、
文字に影を入れる
プロパティです。

画像blog-text-shadow01

text-shadowの
値は5つあります。

text-shadow: 10px 10px 10px green;

左から順番に
 1:左右
 2:上下
 3:ぼかし距離
 4:色

text-shadow: 10px 10px 10px green, 10px 10px 10px red;

 5:複数指定

画像blog-text-shadow05

それでは、
詳しく説明していきます。

text-shadow: 10px 10px 10px green;

text-shadow: 10px 10px 10px green, 10px 10px 10px red;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

text-shadowの説明

text-shadowとは

text-shadowとは、
文字に影を入れる
プロパティです。

画像blog-text-shadow01

値は5つ

text-shadowの
値は5つあります。

text-shadow: 10px 10px 10px green;

左から順番に
 1:左右
 2:上下
 3:ぼかし距離
 4:色

text-shadow: 10px 10px 10px green, 10px 10px 10px red;

 5:複数指定

1:左右

text-shadow: 10px 0px 0px green;

左右の影の位置を指定します。

通常は右側に影がつきます。

マイナスを指定すると
左側に影がつきます。

画像blog-text-shadow02
text-shadow: 10px 0px 0px green;
2:上下

text-shadow: 0px 10px 0px green;

上下の影の位置を指定します。

通常は下側に影がつきます。

マイナスを指定すると
上側に影がつきます。

画像blog-text-shadow03
text-shadow: 0px 10px 0px green;
3:ぼかし距離

text-shadow: 10px 10px 10px green;

ぼかし距離を指定します。

画像blog-text-shadow04
4:色

text-shadow: 10px 10px 10px green;

色を指定します。

指定方法は4つあります。

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
transparent文字色が透明
(取扱注意)
currentcolor色指定できるプロパティ同士で
使いまわせる

currentcolorは、
色指定できるプロパティ同士で
色を使いまわせるプロパティです。

プロパティの種類が変わっても、
使い回す事ができます。

親要素 = color: red
子要素 = background-color: currentColor
孫要素 = border: solid 50px currentColor
(全てredになる)

継承方向への
使い回しはできますが、

兄弟要素では、
できません。

text-shadow: 10px 10px 10px green;
5:複数指定

text-shadow: 10px 10px 10px green, 10px 10px 10px red;

,(コロン)でつないで
複数指定することもできます。

画像blog-text-shadow05
text-shadow: 10px 10px 10px green, 10px 10px 10px red;

まとめ

text-shadowとは

text-shadowとは、
文字に影を入れる
プロパティです。

画像blog-text-shadow01
text-shadowの値は5つ

text-shadowの
値は5つあります。

text-shadow: 10px 10px 10px green;

左から順番に
 1:左右
 2:上下
 3:ぼかし距離
 4:色

text-shadow: 10px 10px 10px green, 10px 10px 10px red;

 5:複数指定

text-shadow: 10px 10px 10px green;

 text-shadow: 10px 10px 10px green, 10px 10px 10px red;

以上、
text-shadow
の話でした。

ありがとうございました。

タイトルとURLをコピーしました