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

CSSのbox-shadowプロパティでシャドウ（影）にぼかし効果を追加する方法

CSSで要素の影（シャドウ）にぼかし効果を加えたい場合は、box-shadowプロパティを使用します。このプロパティでは、水平方向のオフセット、垂直方向のオフセット、ぼかしの半径（ブラー）、そして影の色を指定できます。

box-shadowの基本構文

box-shadow: 水平オフセット 垂直オフセット ぼかし半径 色;

3番目の値が「ぼかし半径」に相当します。この値を大きくするほど、影の輪郭が柔らかく広がり、自然なぼかし効果が得られます。値を0にすると輪郭のはっきりした影になります。

シャドウにぼかし効果を追加するサンプルコード

以下のコードでは、見出し要素（h2）に対して緑色の影と7pxのぼかし効果を設定しています。実際にブラウザで実行して、ぼかされた影の表示を確認してみてください。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         h2 {
            box-shadow: 10px 10px 7px green;
            height: 50px;
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h2>Heading Two</h2>
      <p>上の見出しにはぼかし入りの影が付いています。</p>
   </body>
</html>

各値の意味

  • 10px（水平オフセット）： 影を右方向へ10px移動させます。負の値を指定すると左方向に移動します。
  • 10px（垂直オフセット）： 影を下方向へ10px移動させます。負の値を指定すると上方向に移動します。
  • 7px（ぼかし半径）： 影のぼかし具合を制御します。数値が大きいほど影は柔らかく拡散します。
  • green（色）： 影の色を指定します。任意のCSSカラー形式（カラーネーム、HEX、RGBなど）が使用できます。

ぼかし半径の値を変更して、影の見た目がどのように変化するか試してみると、box-shadowプロパティの理解が深まります。

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

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

  2. CSSのシャドウ効果とは？text-shadowとbox-shadowの使い方を解説

    Webページに立体感や奥行きを加えたいときに便利なのが、CSSのシャドウ（影）効果です。CSSでは、text-shadowプロパティを使ってテキストに影を付け、box-shadowプロパティを使って要素（ボックス）に影を付けることができます。 text-shadowプロパティとは text-shadowは、文字に影を付けるためのプロパティです。「影の色」「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」を指定することで、柔らかい影からくっきりした影まで自由に表現できます。 box-shadowプロパティとは box-shadowは、divなどのボックス要素全体に影を付けるプロ