CSS box-shadowプロパティの使い方

2024-04-02

CSSで要素の片側に影を付ける方法

単一の影

要素の片側に影を付ける最も簡単な方法は、box-shadow プロパティの最初の4つの値を指定することです。これらの値は、以下の順番で指定します。

オフセットX: 影の水平方向の位置
ぼかし: 影のぼかし量
拡散: 影の拡散量
色: 影の色

例えば、以下のコードは、要素の右側に5px離れた、ぼかし量10pxの影を付けます。

.element {
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
}

複数の影を付ける場合は、box-shadow プロパティに複数の値をカンマ区切りで指定できます。

.element {
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.5);
}

影の拡散

box-shadow プロパティの4番目の値は、影の拡散量を指定します。拡散量を0にすると、影はシャープになります。拡散量を大きくすると、影はぼやけます。

.element {
  box-shadow: 5px 0 10px 5px rgba(0, 0, 0, 0.5);
}

影の色

box-shadow プロパティの5番目の値は、影の色を指定します。色は、RGBA形式で指定できます。

.element {
  box-shadow: 5px 0 10px rgba(128, 128, 128, 0.5);
}

その他のオプション

box-shadow プロパティには、他にも様々なオプションがあります。詳細は、以下のサイトを参照してください。

補足

box-shadow プロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、影が表示されない場合があります。
box-shadow プロパティは、要素のレンダリングに時間がかかる場合があります。パフォーマンスが気になる場合は、影の使用を控えめにする必要があります。

例

以下のコードは、要素の四方に影を付ける例です。

<div class="element">
  これは要素です。
</div>

.element {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

このコードを実行すると、以下のようになります。

box-shadow プロパティを使って、要素の片側に影を付けることができます。影の位置、ぼかし、色などを指定して、様々な効果を出すことができます。

単一の影

<div class="element">
  これは要素です。
</div>

.element {
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
}

複数の影

<div class="element">
  これは要素です。
</div>

.element {
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5), 0 10px 5px rgba(0, 0, 0, 0.5);
}

影の拡散

<div class="element">
  これは要素です。
</div>

.element {
  box-shadow: 5px 0 10px 5px rgba(0, 0, 0, 0.5);
}

影の色

<div class="element">
  これは要素です。
</div>

.element {
  box-shadow: 5px 0 10px rgba(128, 128, 128, 0.5);
}

上記のコードは、あくまでも例です。必要に応じて、影の位置、ぼかし、色などを調整してください。

CSSで要素の片側に影を付けるその他の方法

inset を使った影

box-shadow プロパティの inset キーワードを使うと、要素の内側に影を付けることができます。

.element {
  box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.5);
}

疑似要素を使った影

::before や ::after などの疑似要素を使って、影を付けることができます。

.element {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    width: 10px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

SVG フィルターを使って、影を付けることができます。

<div class="element">
  これは要素です。

  <svg>
    <filter id="shadow">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      <feOffset dx="5" dy="0" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
  </svg>
</div>