くまだどうも、くまだです。
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()の場合は色を変化させるだけなので、テキストの視認性を保つことができます。
ここまで読んでくださりありがとうございました。