Bar Chart: Color-mix()
Forrige øvelse
Næste øvelse
Opgavebeskrivelse
Sæt søjlernes background med color-mix(), og bland #3980DD og #DAE9FC ud fra hver søjles data-percent-værdi.
Nulstil øvelsen
<div class="bars-container">
<article class="bars">
<div class="bar" data-percent="100"></div>
<div class="bar" data-percent="70"></div>
<div class="bar" data-percent="60"></div>
<div class="bar" data-percent="50"></div>
<div class="bar" data-percent="40"></div>
<div class="bar" data-percent="30"></div>
<div class="bar" data-percent="20"></div>
<div class="bar" data-percent="10"></div>
</article>
</div>
Vis color-mix()
Color-mix()
.bar {
background: color-mix(#1F2C6D attr(data-percent %, 0%), #D4DEF7);
}