ドロップ シャドウは、Web ページ上に表示されるときに、選択した HTML 要素の背後に影をドロップまたは追加する効果です。この効果は、「」を使用して達成できます。 影を落とす（） ” CSS の値としてのメソッド” フィルター ” プロパティを使用するか、” ボックスシャドウ ' 財産。 「box-shadow」プロパティを利用することで、特定の対象となる HTML 要素に視覚的な強化、ユーザー エクスペリエンス、強調、および焦点を当てることができます。
このガイドでは、box-shadow プロパティを使用してドロップ シャドウ効果を作成する手順を説明します。
-
- box-shadow プロパティを使用してソリッド ドロップ シャドウを作成する
- box-shadow プロパティを使用してぼやけたドロップ シャドウを作成する
- ドロップシャドウ領域を拡張する
box-shadow プロパティを使用して CSS3 でドロップ シャドウを作成する方法
” ボックスシャドウ 」プロパティを使用すると、開発者はページ上の要素の相対位置を示すことで視覚的な階層を確立できます。これを使用すると、Web ページ作成者はオブジェクトが表面に影を落としているような錯覚を作り出し、要素によりインタラクティブな感覚を与えることができます。
構文
「box-shadow」プロパティの構文は次のとおりです。
ボックスシャドウ: [ 水平オフセット 】 [ 垂直オフセット 】 [ ぼかし半径 】 [ 拡散半径 】 [ 色 】 ;
上記の構文で使用される用語の説明:
-
- 当初は「 水平オフセット ” は X 軸の位置を取得/保存し、” ネガティブ 」値は影を左に設定し、その逆も同様です。
- ” 垂直オフセット ” 値には Y 軸の位置が格納され、” ポジティブ 」の値では影が下方向に設定され、「」の場合はその逆になります。 ネガティブ ' 価値。
- 次に、「 ぼかし半径 名前からわかるように、値は影のぼかし度を設定します。
- ” 拡散半径 」の値は、影を拡大する半径を指定します。
- ” 色 ” は影の色を設定します。” HSL ' また ' RGB 」形式も同様です。
ここで、理解を深めるためにいくつかの例を見てみましょう。
例 1: box-shadow プロパティを使用してソリッド ドロップ シャドウを適用する
ソリッドドロップシャドウの設定では、方向と影の色のみが「」に値として挿入されます。 ボックスシャドウ ' 財産：
< スタイル >.boxShadowExample {
幅: 210ピクセル;
ボーダー: 2px ソリッドコーンシルク。
高さ: 210ピクセル;
背景色: #f0f0f0;
ボックスシャドウ: 10px 10px フォレストグリーン;
}
スタイル >
上記のコードでは次のようになります。
-
- まず、クラス「」を持つ HTML 要素が選択されます。 ボックスシャドウの例 ”。そして「」の価値は、 210ピクセル 』に提供されるのは、 身長 ' と ' 幅 ' プロパティ。また、「」も活用してください。 国境 ' と ' 背景色 」プロパティを使用して視覚化を改善します。
- 次に「」の値を設定します。 10px 10px フォレストグリーン ”へ” ボックスシャドウ ” CSS プロパティ。 ” 10ピクセル 」は、シャドウを適用する必要がある位置を決定する水平および垂直オフセットです。そしてその ' フォレストグリーン 」は影の色です。
コンパイル後、Web ページは次のように表示されます。
出力では、box-shadow プロパティを使用してソリッド タイプのドロップ シャドウが配置されたことが確認されます。
例 2: box-shadow プロパティを使用してぼやけたドロップ シャドウを適用する
すでに適用されている影をぼかすには、「」の色の前にもう 1 つの数値を挿入します。 ボックスシャドウ ' 財産。以下の更新されたコードにアクセスしてください。
< スタイル >.boxShadowExample {
幅: 210ピクセル;
ボーダー: 2px ソリッドコーンシルク。
高さ: 210ピクセル;
背景色: 白煙;
ボックスシャドウ: 10px 10px 15px フォレストグリーン;
}
スタイル >
上記のコードによると、影は「 15ピクセル ' ぼやけた。コンパイル フェーズが終了すると、Web ページは次のようになります。
上の図は、影がぼやけていることを示しています。
例 3: ドロップシャドウ領域を拡張する
スプレッド値は「」に提供されます。 ボックスシャドウ 」プロパティを使用して影の領域を拡大します。スプレッドの値は数値形式である必要があります。以下のコード スニペットのように、シャドウ領域は「」に拡張されます。 20ピクセル ”:
< スタイル >.boxShadowExample {
幅: 210ピクセル;
ボーダー: 2px ソリッドコーンシルク。
高さ: 210ピクセル;
背景色: 白煙;
ボックスシャドウ: 10px 10px 15px 20px フォレストグリーン;
}
スタイル >
実行後、ドロップ シャドウは次のように表示されます。
ご覧のとおり、影の領域が 20px 増加しました。
結論
” ボックスシャドウ ” プロパティは、” の作成に利用されます。 影を落とす 」は、選択した HTML 要素に影響します。 ” 影を落とす ” プロパティは 5 つの値を受け入れます。” 水平オフセット ”、” 垂直オフセット ”、” ぼかし半径 ”、” 拡散半径 ' と ' 色 ”。 「水平オフセット」と「垂直オフセット」の値は、ドロップ シャドウが現れる位置からシャドウの寸法を設定します。 「ぼかし半径」値は影をぼかし、「広がり半径」値は影の領域を拡張します。