CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-shadowプロパティでテキストに複数の影を追加する方法

CSSでテキストに複数の影を追加する方法

CSSの text-shadow プロパティを使うと、テキストに影を付けることができます。1つの要素に複数の影を重ねて表示したい場合は、影の設定値をカンマ（,）で区切って指定します。各影は「水平オフセット・垂直オフセット・ぼかし半径・色」の順で記述するのが基本です。

記述例

以下のコードでは、赤・緑・青の3つの影を1行で同時に指定しています。実際にブラウザで実行して、複数の影がどのように重なり合うのかを確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            text-shadow: 0 0 3px red, 0 0 4px green, 0 0 5px blue;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>上の見出しには、複数のテキストシャドウ効果が適用されています。</p>
   </body>
</html>

解説

この例では、0 0 3px red のように、水平・垂直方向のオフセットを0にしてぼかし半径だけを変えた3色の影を重ねています。その結果、見出しの文字の周りに赤→緑→青と広がるグロー（発光）効果のような装飾が生まれます。

オフセットの値や色を変えれば、立体的な影やネオン風の演出など、さまざまなデザインに応用できます。複数の影は前から順に描画されるため、重なり順も意識するとより表現力豊かなテキスト装飾が可能です。

  1. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  2. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q