👌

(CSS) box-sizingとmix-blend-modeについて

に公開
CSS
tech

わかると役にたつ！
CSSの二つの効果についてまとめてみました。

box-sizing の基本まとめ

デフォルトは content-box

box-sizing: content-box

  • width／height は「コンテンツ部分だけ」のサイズ
  • padding・border を追加すると、全体のボックスサイズが大きくなる 
.box {
  box-sizing: content-box; /* デフォルト */
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}
/* 全体サイズ = 200 + 10*2 + 5*2 = 230px */

box-sizing: border-box

  • width／height に padding と border を含めてサイズを計算
  • padding・border を追加しても、全体ボックスサイズは変わらない 
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}
/* 全体サイズ = 200px のまま */

全要素にグローバル適用

/* これだけで、box-sizing 関連の計算ミスを激減！ */
*, *::before, *::after {
  box-sizing: border-box;
}

mix-blend-mode

mix-blend-mode は、要素（前景）が背後の要素（背景）とどのようにブレンドされるかを指定する CSS プロパティです。

デフォルトは normal

よく使うブレンドモードまとめ

モード名 説明
normal デフォルト。合成なし。
multiply 前×後。暗い色同士を重ねるとさらに暗く、白は透明扱い。
screen 乗算の逆。明るい色同士を重ねるとさらに明るく、黒は透明扱い。
overlay multiply と screen の組み合わせ。中間トーンを強調してコントラストUP。
darken 前と後で暗いほうを表示。
lighten 前と後で明るいほうを表示。
difference 前−後、または後−前の絶対値。強いコントラストを作成。
exclusion difference のマイルド版。

例： mix-blend-mode: difference

写真と赤い文字を重ね、mix-blend-mode: difference を適用

他も色々試してみてください！

私はハンバーガーメニューのアイコンをdifferenceを使って、背景によっては見えなかったアイコンを見えるようにしました。

Discussion