タグ

2020年7月3日のブックマーク (1件)

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

    画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、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 surro

    CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
    rryu
    rryu 2020/07/03
    透明度の高い枠線を画像の上に重ねることで枠線が要らないくらい画像が濃ければ枠線が目立たなくなるという小技。