CSS text-shadowプロパティ

text-shadowプロパティは、テキストの文字に影の効果（Shadow Effect）を適用するプロパティです。

• このプロパティの特徴および実装方法、
• 特に複数を使用する方法について説明します。
• そして、多様な例題を通じて text-shadow を効果的に活用する方法を見ていきましょう。

selector {
    text-shadow: /* 値 */
}

 

構文

/*
 * <offset-x>（必須）：x軸（横方向）の距離（正の数、0、負の数が指定可能）。長さの値（%単位の使用は不可）
 * <offset-y>（必須）：y軸（縦方向）の距離（正의 数、0、負の数が指定可能）。長さの値（%単位の使用は不可）
 * <blur-radius>（任意）：ぼかし効果。大きさの基準はぼかし効果を円の半径として測定（正の数、0のみ。負の数は不可）。
 * 初期値は 0。長さの値（%単位の使用は不可）
 * <color>（任意）：影の色。初期値は currentcolor（現在の文字色）
 */

/* 注意！ <offset-x> と <offset-y> の間に <blur-radius> や <color> を配置することはできません。 */
/* 注意！ <blur-radius> は必ず <offset-y> の直後に指定しなければなりません。 */
/* 注意！ <color> は <offset-x>、<offset-y>、<blur-radius> の間に配置することはできません。 */

/* <offset-x> | <offset-y> | <blur-radius> | <color> */
text-shadow: 2px 3px 4px red;

/* <color> | <offset-x> | <offset-y> | <blur-radius> */
text-shadow: red 2px 0 4px;

/* <offset-x> | <offset-y> | <color> */
text-shadow: 5px 5px #00a0e9;

/* <color> | <offset-x> | <offset-y> */
text-shadow: green 2px 5px;

/* <offset-x> | <offset-y>
    <color> と <blur-radius> は初期値が適用されます */
text-shadow: 5px 10px;

/* 複数の影の効果は値をカンマ（,）で区切って追加します。
    影の効果は記述した順に前面から背面へと適用されます。最初の影が最前面に表示されます。 */
text-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

/* 初期値 */
text-shadow: none; /* 影の効果がないことを意味します */

/* グローバル値 */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

 

参考資料

CSS text-shadowプロパティ：テキストに影の効果

CSS text-shadowプロパティ：テキストに影の効果 - codingEverybody

 

 

 

• CSS text-shadow 속성 – 텍스트에 그림자 효과

CSS text-shadow 속성 – 텍스트에 그림자 효과 - 코딩에브리바디

 

CSS text-shadow Property – Applying Shadow Effects to Text

CSS text-shadow Property – Applying Shadow Effects to Text - codingCourses