自然に見える画像の枠線を求めて

この記事の概要

サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。
そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。

そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。

完成物＆通常のborderとの比較

全体像はこちらです。

差がわかりやすそうな部分をクローズアップしました。
左の画像の草、真ん中の画像の右端にあるペンケース（？）、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。

修正版がこちらです。
左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。

CodePenはこちら。

仕組み

<div class="adjusted-border"> <!-- 1 -->
  <img alt="" src="画像のパス">
</div>

.adjusted-border {
  position: relative;
}

.adjusted-border::before {
  position: absolute;
  content: "";
  inset: 0; /* 2 */
  box-shadow: 0 0 0 2px rgb(220 220 220) inset; /* 3 */
  mix-blend-mode: darken; /* 4 */
}

1. 擬似要素を使う都合上、img単体では実現できないためdivで包む
2. divの擬似要素を中身の要素と同じサイズに指定
3. box-shadowのinsetを使い、divの領域の内側に線っぽく描画
4. mix-blend-mode: darken;で、線の方が暗いときだけ描画されるように変更

若干行数が多いものの、簡単にできました。

また、mix-blend-mode: lighten;にすれば、ダークモード用の描画（画像よりも明るい箇所だけ薄い白の線を引く）も実現できます。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！