CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる

サイト構築 -CSS

Post on:2020年7月3日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。

高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。

borderとbox-shadowの比較

元ネタは、下記ツイートです。意訳すると、
インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。

👨🏾‍💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surrounding page. More seamless and color flexible than a border. pic.twitter.com/IMi41q81wZ

— Hakim El Hattab (@hakimel) June 9, 2020

スタイル無しの場合、borderを加えた場合、box-shadowを加えた場合を実際に見比べてみてください。

スタイル無し、border、box-shadowの比較

当ブログではborderを採用していますが、box-shadowいいですね。borderだと枠線が目立ちますが、box-shadowだと繊細で、画像のサイズも変わりません。

実装コードは、下記の通りです。

<img class="img-border" src="image.png">

<div class="img-shadow"><img src="image.png"></div>

.img-border {
  border: 3px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.img-shadow {
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.1) inset;
}
.img-shadow img {
  position: relative;
  z-index: -1;
}