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

CSS3で画像にドロップシャドウを追加する方法

CSS3で画像にドロップシャドウを追加するには、filterプロパティにdrop-shadow()関数を指定します。この関数を使うことで、画像の輪郭に沿った自然な影を簡単に表現できます。drop-shadow()では、以下の値を設定することが可能です。

drop-shadow()の各値の意味

  • h-shadow（水平方向のオフセット）：影の水平方向のずれをピクセル値で指定します。
  • v-shadow（垂直方向のオフセット）：影の垂直方向のずれをピクセル値で指定します。負の値を指定すると、影は画像の上側に表示されます。
  • blur（ぼかし）：影にぼかし効果を加えます。値が大きいほど、柔らかく広がりのある影になります。
  • spread（広がり）：正の値を指定すると影が拡大し、負の値を指定すると影が縮小します。
  • color（色）：影の色を指定します。キーワードやカラーコードなどが使用できます。

サンプルコード

以下の例では、通常の画像とdrop-shadow()を適用した画像を並べて比較しています。デモ用の画像クラスには、明るさ・コントラストの調整もあわせて指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: brightness(120%);
    filter: contrast(120%);
    filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

実行結果

上記のコードを実行すると、1つ目の画像はそのまま表示され、2つ目の画像には緑色のドロップシャドウが右下方向（水平10px・垂直10px）にぼかし付きで描画されます。

補足：box-shadowとの違い

似たような効果を持つbox-shadowプロパティは要素の矩形全体に影を付けますが、drop-shadow()は画像の実際の形状（透明部分を除いた輪郭）に沿って影を生成する点が特徴です。PNGなどの透過画像に対して、より自然な影を表現したい場合にdrop-shadow()が適しています。

  1. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ

  2. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し