CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
Post on:2020年7月3日
sponsors
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、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だと繊細で、画像のサイズも変わりません。
実装コードは、下記の通りです。
|
1 2 3 |
<img class="img-border" src="image.png"> <div class="img-shadow"><img src="image.png"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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; } |
実際の動作は、下記ページでご確認ください。
See the Pen
Image Contrast Options by Hakim El Hattab (@hakimel)
on CodePen.
sponsors
