【CSS】画像の外側 / 内側に影をつける方法

【メイン画像】CSSを使って画像の外側もしくは内側に影を付ける方法

「box-shadow」プロパティを使って、画像の外側に影を付けて浮かび上がったように見せたり、逆に内側に影を付けて中心にフォーカスさせたように見せたりする方法を紹介します。

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

box-shadowプロパティについて
セレクター { 
  box-shadow: 10px 20px black;
}
  • 最初の2つの数値で、影の位置(上下・左右)を指定します。
    • 上のコードでは、「10px下・20px右」に影を配置します。
    • 数値をマイナスにすると、上および左方向に影を配置します。
  • 位置指定後は影の色を指定します。
    • 上のコードでは、影の色を「black(黒)」にします。
    • rgbaで指定することもでき、透明感を出したい場合はこちらを使います。
  • 影にぼかしを加えることもできます。

「box-shadow」の具体的な使い方については、本記事の後半に纏めています。

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

影なし

大久野島にいるうさぎその2

外側に影を付ける

大久野島にいるうさぎその2

最近よく用いられるスタイルで、少し浮かび上がったような印象になります。

内側に影を付ける

大久野島にいるうさぎその2

画像中心にフォーカスを当てたような印象になります。

HTML / CSS コード(外側に影を付ける)

<!-- srcの値は表示したい画像を指定してください。 -->
<img src="">
img {
  box-shadow: 0 0 30px black;
}

影は画像と同じ位置(0 0)に配置します。
このままで影が画像と被ってしまって見えないのですが、ぼかしを加えることで画像の外側に向かって影が伸びて見えるようになります。

実装例のぼかしは30pxとしていますが、数値を増減させることで影の広がり具合を調整できます。

HTML / CSS コード(内側に影を付ける)

<div class="container">
  <div class="inset">
    <!-- srcの値は表示したい画像を指定してください。 -->
    <img src="">
  </div>
</div>
.container {
  position: relative;
  z-index: 0;
}

.inset {
  box-shadow: inset 0 0 50px black;
}

img {
  position: relative;
  z-index: -1;
}

画像の内側に影を付ける場合、対象の要素自体にbox-shadowをセットしても反映されません。(影が画像の裏側にセットされてしまうため。)

これを解決するには、上記コードのように「z-index」プロパティを使用し、画像を影の裏側に配置します。また、「z-index」は「positon」プロパティとセットで使わないと反映されません。

上記コードのように、

  • 親要素に「position: relative;」「z-index: 0;」
  • 画像要素に「position: relative;」「z-index: -1;」

を設定することで、画像の内側に影を付けることができます。

「box-shadow」プロパティについて

上述の通り、特定の要素に影を付けるには「box-shadow」プロパティを使用します。
以下のような値を指定することで、影の位置 / 影の大きさ / 影の濃さ などを自由に調節できます。

例)影の位置を調節する

セレクター {
  background: skyblue;
  box-shadow: 10px 10px black;
}

下に10px、右に10pxずれた位置に影を付けるプロパティです。

セレクター {
  background: skyblue;
  box-shadow: -10px -10px black;
}

上に10px、左に10pxずれた位置に影を付けるプロパティです。

例)影にぼかしを加える

セレクター {
  background: lime;
  box-shadow: 10px 10px 10px black;
}

10pxのぼかしを加えたパターンです。(3つ目の数値でぼかし具合を調整できます。)

セレクター {
  background: lime;
  box-shadow: 10px 10px 30px black;
}

30pxのぼかしを加えたパターンです。(3つ目の数値でぼかし具合を調整できます。)

例)影の外側 / 内側に影を付ける

セレクター {
  background: magenta;
  box-shadow: 0px 0px 30px black;
}

要素の外側全体に影を付け、浮かび上がったような見た目にするCSSです。

セレクター {
  background: magenta;
  box-shadow: inset 0 0 30px black;
}

要素の内側に影を付ける場合、最初の値に「inset」を記述します。

まとめ

以上、「box-shadow」プロパティを使った影の付け方について紹介しました。

外側に影を付ける場合は簡単ですが、画像の内側に影を付ける場合は「z-index」を使う必要があり、慣れていないとちょっとややこしく感じると思います。

実装の際は、要素を弄ってみてどのように表示されるか試してみると、より理解が深まると思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次