I dagens CSS skal vi se på mix-blend-mode
mix-blend-mode er kanskje ikke noe man kommer til å bruke ofte, men det er kanskje noe man ikke visste fantes til å begynne med. I korte trekk sier det noe om hvordan et element skal blende med andre elementer som overlapper og bakgrunnen.
Det er altfor mange mulige metoder å velge mellom, så jeg kommer ikke til å skrive dem alle her, men hvis man har erfaring fra Photoshop vil man kjenne igjen de fleste. I dette eksempelet kan vi se hvordan sirkler og farger påvirkes av overlapp og mix-blend-mode
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>.circle {
width: 80px;
height: 80px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.circle-1 {
background: red;
}
.circle-2 {
background: lightgreen;
left: 40px;
}
.circle-3 {
background: blue;
left: 20px;
top: 40px;
}
.isolate {
isolation: isolate;
position: relative;
}mix-blend-mode er godt støttet i dag så det er ingen grunn til å ikke ta det i bruk.
Relevante lenker anbefalt av forfatteren
Uffda. En feil har oppstått, og vi klarer ikke å hente lenken!