CSS - ボックスの内側に影をつけて立体感を出す

以前、ホームページ運営者から次のような相談を受けました。

相談者「枠線(ボックス)の中に画像を表示しているのですが、 この画像に立体感を出したいんですよ」

相談者「イメージでいうと、絵の枠(フレーム)のような感じです。 でもそんなに大げさな枠じゃなくて、少しでいいんです」

私「それなら、枠線(ボックス)の内側に影を入れると、 画像が凹んだように見えて立体的に見えますよ」

今回はこの相談を解決するために、ボックスの内側に影(シャドウ)をつけて、 立体感を出す方法を紹介します。

通常の影なしボックス

div要素(ボックス)に対して枠線「border: 1px solid #000」と、 パディング「padding: 10px」を指定する場合、下のように表示されます。

影なし
CSS

div.box {
  border: 1px solid #000;
  padding: 10px;
}

ボックスの内側に影を付ける

ボックスの内側に影を付ける場合は 「box-shadow」プロパティの先頭に「inset」キーワードを使用します。

内側に影をつける
CSS

.box-shadow {
  border: 1px solid #000;
  padding: 10px;
  box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.5);
}

先頭に「inset」を付ける以外は、通常の「box-shadow」の指定方法と同じです。

  • 横方向のずれ
  • 縦方向のずれ
  • ぼかし量
  • 拡張量

の順で指定します。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする