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

CSSのtext-shadowプロパティでテキストに影を付ける方法

CSSのtext-shadowプロパティを使うと、文字の周りに影（シャドウ）を付けることができます。影の位置やぼかし具合、色を自由に指定できるため、見出しやタイトルを目立たせるデザインに活用できます。

text-shadowの基本構文

text-shadowプロパティは、以下のように値をスペース区切りで指定します。

text-shadow: 横方向のオフセット 縦方向のオフセット ぼかし半径 影の色;
  • 横方向のオフセット： 影を右にずらす距離。負の値を指定すると左に移動します。
  • 縦方向のオフセット： 影を下にずらす距離。負の値を指定すると上に移動します。
  • ぼかし半径： 影の輪郭をぼかす範囲。0を指定するとくっきりとした影になります。
  • 影の色： red、#ff0000、rgba(255, 0, 0, 0.5) などの形式で指定できます。

使用例

次のコードでは、赤い影を付けたテキストを表示しています。ブラウザがCSSのtext-shadowプロパティに対応していれば、テキストに赤い影が表示されます。

<html>
   <head>
   </head>
   <body>
      <p style = "text-shadow:3px 2px 5px red;">
         お使いのブラウザがCSSのtext-shadowプロパティに対応している場合、このテキストには赤い影が付きます。
      </p>
   </body>
</html>

複数の影を重ねるテクニック

text-shadowプロパティは、カンマで区切ることで複数の影を1つの要素に適用することもできます。これにより、ネオン風の光り輝くエフェクトなど、より表現力豊かなデザインが可能になります。

<p style = "text-shadow:2px 2px 3px gray, -2px -2px 3px lightblue;">
   複数の影を組み合わせたテキスト
</p>

ぜひ実際にコードを実行して、影のオフセットやぼかしの値をいろいろと変更しながら、思い通りのデザインを見つけてみてください。

  1. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none

  2. CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法

    list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目