【CSS】color-mixとホバー

どうも、くまだです。

CSSのcolor-mix()について。

color-mix()

CSSのcolor-mix()は以下のような構文になります。

color-mix(in 色空間, 色1 比率1, 色2 比率2)

指定した色空間で2つの色を混ぜ合わせるものになります。

色空間では、「srgb」が一般的に使われますが、他にもあります。色空間は色を表現する範囲や方法を指定するものです。

コードは以下になります。

 <button class="hover-box">text</button>
.hover-box {
  width: 200px;
  height: 100px;
  background-color: orange; 
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.hover-box:hover {
  background-color: color-mix(in srgb, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 50%);
}

See the Pen color-mix() by kuma0605 (@kuma0605) on CodePen.

ホバーすると背景色が変化します。ホバーした後の赤や青の比率を調整すれば異なる紫色に変化します。

ホバーにはよくopacityを使うケースが多いです。opacityは透明度を下げるだけですが、color-mix()の場合は色を変化させるだけなので、テキストの視認性を保つことができます。

ここまで読んでくださりありがとうございました。

この記事を書いた人