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

CSSでシャドウに色を追加する方法【box-shadowプロパティの使い方】

CSSでシャドウに色を追加する方法

要素のシャドウ（影）に色を付けるには、CSSのbox-shadowプロパティを使用します。このプロパティでは、水平方向・垂直方向のオフセット（ずれ）とあわせて、影の色を自由に指定することができます。

box-shadowプロパティの基本構文は以下のとおりです。

box-shadow: 水平オフセット 垂直オフセット 色;
  • 水平オフセット： 影を右方向へずらす距離（負の値を指定すると左方向へ移動）
  • 垂直オフセット： 影を下方向へずらす距離（負の値を指定すると上方向へ移動）
  • 色： カラーネーム（green、redなど）、16進数カラーコード、RGB値などで指定可能

それでは、実際にシャドウへ色を設定するコードを見てみましょう。以下の例では、h2要素に対して「10px 10px」の位置に緑色（green）のシャドウを適用しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         h2 {
            box-shadow: 10px 10px green;
            height: 70px;
            background-color: red;
         }
      </style>
   </head>
   <body>
      <h2>Heading Two</h2>
      <p>上の見出しにはシャドウが表示されます。</p>
   </body>
</html>

このコードを実行すると、赤い背景のh2要素の右下に緑色のシャドウが表示されます。色の部分を「blue」や「#ff0000」「rgb(0, 128, 0)」などに変更すれば、好みの色のシャドウを簡単に作成できます。ぜひいろいろな値を試して、box-shadowプロパティの挙動を確認してみてください。

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

    Webページのテキストに立体感や装飾性を持たせたいときに便利なのが、CSSのtext-shadowプロパティです。このプロパティを使うことで、文字に影を簡単に追加できます。text-shadowの基本構文text-shadowプロパティは、以下の値を組み合わせて指定します。水平方向のオフセット（offset-x）：影を右（正の値）または左（負の値）にずらす距離垂直方向のオフセット（offset-y）：影を下（正の値）または上（負の値）にずらす距離ぼかし半径（blur-radius）：省略可能。数値が大きいほど影が柔らかくぼやける色（color）：省略可能。影の色を指定するまた、カンマで区切るこ

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1