CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでドロップシャドウ効果を設定する方法

ドロップシャドウ（Drop Shadow）とは、指定したX方向（水平）・Y方向（垂直）のオフセット位置と色をもとに、オブジェクトに影を付けるフィルター効果です。テキストや画像などの要素に立体感や奥行きを与えることができます。

ドロップシャドウで利用できるパラメータ

このフィルターでは、以下のパラメータを指定できます。

パラメータ説明
color影の色を #RRGGBB 形式で指定します。
offXX軸（水平方向）における、オブジェクトから影までのずれ幅（ピクセル数）。正の整数で右方向へ、負の整数で左方向へ移動します。
offYY軸（垂直方向）における、オブジェクトから影までのずれ幅（ピクセル数）。正の整数で下方向へ、負の整数で上方向へ移動します。
positivetrue の場合、オブジェクトの不透明なピクセルすべてに影が付きます。false の場合は、透明なピクセルに影が付きます。デフォルト値は true です。

サンプルコード

以下のコードを実行すると、ドロップシャドウ効果を確認できます。

<html>
   <head></head>
   <body>
      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "Filter: Chroma(Color = #000000)
         DropShadow(Color = #FF0000,
         OffX = 2,
         OffY = 2, Positive = 1)">
      <p>Text Example:</p>
      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
   </body>
</html>

補足：モダンブラウザでの代替手段

上記の DropShadow フィルターは Internet Explorer 独自の拡張機能であり、現在では非推奨となっています。モダンブラウザで同様の効果を実現するには、box-shadow プロパティや text-shadow プロパティ、あるいは filter: drop-shadow() 関数を使用するのが一般的です。

/* 例：filter を使ったドロップシャドウ */
.shadow {
   filter: drop-shadow(2px 2px 2px #000000);
}

  1. CSSでホバー効果の速度を設定する方法｜transition-durationの使い方を解説

    CSSでホバー（マウスオーバー）時のアニメーション速度を設定するには、transition-duration プロパティを使用します。ホバー時のスタイル変更は :hover セレクターで指定します。transition-durationと:hoverセレクターの役割transition-durationプロパティは、要素のスタイルが変化する際にかかる時間を秒（s）またはミリ秒（ms）単位で指定できます。例えば「2s」と設定すれば、色や枠線などの変化が2秒かけて滑らかに遷移します。このプロパティを元の要素側に記述し、変化後のスタイルを :hover セレクターで定義することで、自然なホバーアニメ

  2. CSSのシャドウ効果とは？text-shadowとbox-shadowの使い方を解説

    Webページに立体感や奥行きを加えたいときに便利なのが、CSSのシャドウ（影）効果です。CSSでは、text-shadowプロパティを使ってテキストに影を付け、box-shadowプロパティを使って要素（ボックス）に影を付けることができます。 text-shadowプロパティとは text-shadowは、文字に影を付けるためのプロパティです。「影の色」「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」を指定することで、柔らかい影からくっきりした影まで自由に表現できます。 box-shadowプロパティとは box-shadowは、divなどのボックス要素全体に影を付けるプロ