CSSでドロップシャドウを作成する方法

デザインのトレンドは毎年異なりますが、ボックスシャドウやドロップシャドウなどの主要なシャドウ効果を使用して、Webサイトの美学に積極的に貢献することができます。あなたは使用することができ、ドロップシャドウの安っぽいとオフに来なくて快適、美しくレンダリング効果を作成します。

CSSのドロップシャドウプロパティを詳しく見てみましょう。

CSSドロップシャドウとは何ですか？

drop-shadow（）は、指定されたオブジェクトの形状の周りに影を表示するCSS効果です。CSSドロップシャドウを適用するための構文は次のとおりです。

Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);

フィルター関数には、blur（）、brightness（）、drop-shadow（）など、さまざまなものがあります。

offset-xは水平距離を決定し、offset-yは垂直距離を決定します。負の値は、オブジェクトの左側（offset-x）と上部（offset-y）に影を配置することに注意してください。

最後の2つのパラメーターはオプションです。影のぼかし半径を長さとして指定できます。デフォルトでは0に設定されています。負のぼかし半径を持つことはできません。

影の色はとして指定されます。色を指定していない場合は、colorプロパティの値に従います。

CSSドロップシャドウはいつ役に立ちますか？

ボックスシャドウがうまく機能することはすでにご存知かもしれません。では、なぜドロップシャドウが必要なのかと思うかもしれません。drop-shadow（）関数が命の恩人であるケースは数多くあります。それらのいくつかを見てみましょう：

非長方形の形状

ボックスシャドウとは異なり、長方形以外の形状にドロップシャドウを追加できます。たとえば、長方形ではない形状の透明なSVGまたはPNGがあります。たとえば、星です。ここで、オブジェクト自体に対応するシャドウの追加は、box-shadowまたはdrop-shadowのいずれかを使用して完了することができます。両方のシナリオを検討してください。

HTML

CSS

.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }

出力：

両方の効果を比較すると、ボックスシャドウが長方形のシャドウを与えることは明らかです。また、画像が透明であるか、すでに背景を持っているかは関係ありません。一方、ドロップシャドウを使用すると、画像自体の形状に一致するシャドウを作成できます。

制限要因は、drop-shadow（）関数が、insetキーワードとspreadパラメーターを除くタイプのすべてのパラメーターを受け入れることです。

グループ化された要素

特定の要素を重ねてコンポーネントを構築する必要がある場合がいくつかあります。ボックスシャドウを使用している場合は、シャドウを正しい方法でキャストしようとする問題に直面します。画像とテキストコンポーネントをグループ化するときの仕組みは次のとおりです。

HTML

Live in the moment

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

基本的なCSS

body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }

次に、ボックスシャドウとドロップシャドウを適用して違いを確認します。

.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }

出力：

ご覧のとおり、ボックスシャドウは各要素に個別に適用され、ドロップシャドウは両方の要素をグループ化してシャドウを適用します。

切り取られた要素

clip-pathプロパティを使用して、画像または要素のどの部分を表示するかを決定する特定の領域をクリップできます。ドロップシャドウフィルタは、私たちが作成することを可能にする、ドロップシャドウ、その要素の親にそれを適用することにより、クリップされた要素上を：

HTML

CSS

.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }

出力：

画像の50％を円形のパスでクリップしました。したがって、ドロップシャドウフィルターは画像の可視部分にのみ適用されます。すごいじゃないですか。

制限と違い

上で説明したように、ドロップシャドウはスプレッドパラメータをサポートしていません。つまり、drop-shadow（）関数はどこでも強制終了されるため、アウトライン効果を作成することはできません。また、box-shadowおよびtext-shadowとは異なるシャドウ効果をレンダリングします（同じパラメーターを使用）。ボックスシャドウとドロップシャドウの違いは、CSSボックスモデルに帰着すると感じるかもしれません。一方はそれに従いますが、もう一方は従いません。次に例を示します。

HTML

Every MUO article will bring you one step closer.

Every MUO article will bring you one step closer.

Every MUO article will bring you one step closer.

基本的なCSS

body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }

シャドウ効果の適用

.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }

出力：

ボックスシャドウは、テキストシャドウやドロップシャドウよりも重くて暗い影を与えることがわかります。また、text-shadowとdrop-shadowの間でシャドウの位置にわずかな違いがあります。それでも、要件に応じて異なるシャドウ効果を好む場合があります。

ブラウザのサポート

ドロップシャドウ（）関数では、Internet Explorerなどの古いブラウザを除くすべての最新ブラウザでサポートされています。UXを深刻に妨げるものではありませんが、ボックスシャドウフォールバックを使用して機能クエリを追加できます。

さまざまなシャドウ効果を試す

ボックスシャドウの人気は、ユースケースが多数あるため非常に明白です。ただし、drop-shadow（）関数は十分に活用されていません。さまざまなシャドウ効果を試して、将来のプロジェクトでドロップシャドウを実装してみてください。

疑似クラスは、CSSと個人のWeb開発レパートリーにまったく新しい範囲の機能を追加します。より熟練した効率的なWeb開発者になるために、それらについて詳しく学んでください。