ボックスシャドウCSSチュートリアル–任意のHTML要素にドロップシャドウを追加する方法

CSSプロパティを使用して、任意のHTML要素にドロップシャドウを追加できますbox-shadow。方法は次のとおりです。

基本的なドロップシャドウの追加

まず、ドロップシャドウを追加するための基本的なHTML要素をいくつか設定しましょう。

 Box1 Box2 Box3 

次に、いくつかの基本的なCSSを追加します。

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

結果は、一意のIDを呼び出すことでドロップシャドウを簡単に追加できる3つのブラックボックスになります。

HTML要素の設定

基本的なドロップシャドウを追加するbox-shadowには、ボックス1のプロパティを使用しましょう。

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
ボックス1に基本的なドロップシャドウを追加する

ここには3つのパラメータがあります。最初の2つは、それぞれxオフセットとyオフセットです。ドロップシャドウの位置を設定します。

オフセットは原点を基準にしており、HTMLでは常に要素の左上隅になります。正のxオフセットは影を右に移動し、正のyオフセットは影を下に移動します。

3番目のパラメータは、ドロップシャドウの色です。

ここでは要素を使用しましたが、box-shadowプロパティは他のHTML要素にも適用できることに注意してください。

ぼかし半径の追加

影をもう少しリアルに見せたい場合は、blur-radiusパラメータを試してみてください。

このパラメータは、シャドウが大きく、明るくなるようにシャドウをぼかす量を制御します。ボックス2に適用してみましょう。

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
ボックス2にぼかし半径を追加する

4pxの値は、ドロップシャドウに適用するぼかしの半径を設定します。

スプレッド半径の追加

影のサイズを制御する場合はspread-radius、影の拡大または縮小の量を制御するパラメータを使用できます。

ボックス2に8pxの広がり半径を追加しましょう。

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
ボックス2にぼかしに加えて広がり半径を追加する

これらのパラメータの順序を覚えておいてください!

1つのプロパティに複数のシャドウを組み合わせる

凝ったものにしたい場合は、単一のbox-shadowプロパティを使用して要素に複数のドロップシャドウを追加できます。

青と緑のドロップシャドウを同時に追加して、ボックス3でそれを実行しましょう。

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
複数のドロップシャドウを組み合わせる

ボーナス:インセットシャドウを作成する

ドロップシャドウは作成されませんが、insetパラメータはbox-shadowプロパティとともに使用することもできます。

名前が示すように、このパラメータははめ込みシャドウ(つまりボックス内のシャドウ)を作成します。

insetパラメータは、先頭または末尾のいずれかに配置することができます

box-shadowプロパティ。ここでは、blockquote要素を使用した使用方法を示します。

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
はめ込み影を作成する

もちろん、いくつかのぼかしと広がりを追加して、影、または複数の影を強調することもできます。

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
ドロップシャドウと組み合わせたインセットシャドウ

このbox-shadowプロパティを使用すると、Webページ上の要素を簡単に目立たせて、優れた3D照明効果を作成できます。

自分で実験したい場合は、このチュートリアルで使用した例を使用して作成したコードペンを次に示します。

遊んで、あなたが思いつくことができるものを見てください!

Web開発のヒントと知識をもっと見たいですか?

  • 私の週刊ニュースレターを購読する
  • 1000マイルワールドで私のブログをご覧ください
  • Twitterでフォローしてください