CSS の box-shadow プロパティは、開発者が HTML 要素に深さと次元を導入する効果的なメカニズムとして機能します。要素に影を組み込むことで、ユーザー インターフェイスのリアルさと視覚的な魅力を高めることができます。この記事では、box-shadow の基礎を詳しく説明し、その応用をマスターするのに役立つ例を提供します。

基本を理解する

box-shadow プロパティは、影の表示方法を定義するいくつかの値で構成されます。基本的な構文は次のとおりです:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: このパラメータは影の水平方向の変位を定義します。正の値を指定すると影が右に移動し、負の値を指定すると影が左に移動します。
• offset-y: このパラメータは影の垂直方向の変位を示します。正の値を指定すると影が下に移動し、負の値を指定すると影が上に移動します。
• blur-radius (オプション): この設定は影の柔らかさを調整します。値が大きいほど、シャドウがより拡散します。このパラメータが指定されていない場合、デフォルト値は 0 で、明確な影が生成されます。
• spread-radius (オプション): このパラメータは影の寸法に影響します。正の値を指定すると影のサイズが大きくなり、負の値を指定すると影のサイズが小さくなります。
• color: この属性は影の色を定義します。 #000、rgba(0,0,0,0.5)、hsl(0, 0%, 50%) などの有効な CSS カラー表現を指定できます。

例: 基本的なボックス シャドウ

ボタンにボックスシャドウを適用する簡単な例を見てみましょう:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

この場合、影は水平方向と垂直方向に 5px ずつ オフセット され、ぼかし半径は 10px で、0.3 の黒で着色されます。不透明度。

例: 差し込みシャドウ

box-shadow は、inset キーワードもサポートしています。これは要素の内側に影を配置し、凹んだ効果を与えます。

div {
  box-shadow: inset 0 0 10px #000;
}

ここでは、影を div の内側に配置し、コンテンツが内側に押し込まれたような効果を作成しています。

高度なヒント

• 各 box-shadow の指定をカンマで区切ることで、複数のシャドウを作成できます。このテクニックを使用すると、複雑なレイヤー状のシャドウ効果を作成できます。

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• シャドウ効果は、ホバー インタラクションを生成するために頻繁に使用され、ボタンやカードのインタラクティブ性を高めます。

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

より視覚的なアプローチを好む方は、Box-Shadow CSS Generator をチェックしてください。このツールを使用すると、コードを記述したりプリセットを保存したりせずに、カスタムのボックス シャドウ エフェクトを簡単に作成できます。