Loading article…
グラフィックデザインやコンピュータグラフィックスにおいて、ドロップシャドウとは、オブジェクトの影のように見える描画要素で構成される視覚効果であり、オブジェクトが背後のオブジェクトよりも高く浮いているような印象を与えます。ドロップシャドウは、ウィンドウやメニューなどのグラフィカルユーザーインターフェースの要素や、シンプルなテキストによく使用されます。多くのデスクトップ環境において、デスクトップ上のアイコンのテキストラベルにはドロップシャドウが適用されています。これは、テキストが背景色から効果的に区別されるためです。
長方形のオブジェクトにドロップシャドウを描く簡単な方法は、オブジェクトの下に灰色または黒色の領域を描き、オブジェクトから少しずらすことです。一般的に、ドロップシャドウは、オブジェクトの黒または灰色のコピーを、わずかに異なる位置に描いたものです。リアリティを高めるには、次の方法があります。
インセットドロップシャドウは、要素の内側に影を描画するタイプです。これにより、インターフェース要素がインターフェース内に埋め込まれているように見せることができます。
写真編集や写真のポストプロダクションにおいて、ドロップシャドウは画像内のモデルや商品の真下に追加されることがあります。これは背景と被写体のコントラストを高めるために使用されます。ドロップシャドウを追加するには、レタッチャーはAdobe Photoshopなどの画像編集ツールを使用します。
ドロップシャドウは、ECサイトにおける視覚効果としてよく用いられます。これは、商品画像の見栄えを向上させ、画像に奥行きを与えるために行われます。
一般的に、コンポジット型ウィンドウマネージャはドロップシャドウ効果をサポートしていますが、スタッキング型ウィンドウマネージャはサポートしていません。macOSなどの一部のオペレーティングシステムでは、アクティブウィンドウと非アクティブウィンドウを区別するためにドロップシャドウが使用されます。
ウェブサイトでは、CSSプロパティ[ 1 ]box-shadow、[ 2 ]および フィルター関数[ 3 ]を介してドロップシャドウ効果を使用できます。最初の 2 つはそれぞれ要素とテキストに使用され、フィルターは要素のコンテンツに適用され、奇妙な形状の要素や透明な画像をサポートできます。text-shadowdrop-shadow()filter