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

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

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

borderとbox-shadowの比較

borderとbox-shadowの比較

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

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

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

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

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

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

実際の動作は、下記ページでご確認ください。

See the Pen
Image Contrast Options
by Hakim El Hattab (@hakimel)
on CodePen.

sponsors

top of page

©2020 coliss