100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
<link rel="stylesheet" href="resources/blending-style.css">
|
|
<style>
|
|
.example {
|
|
width: 180px;
|
|
height: 180px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.blendingbg {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: linear-gradient(to right, #0ff 0%, #00f 25%, #f00 50%, #ff0 75%, #0f0 100%);
|
|
}
|
|
|
|
.intermediate {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: linear-gradient(to bottom, #f00 0%, #0f0 100%);
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
ol {
|
|
margin-bottom: 2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
<ol>
|
|
<li>No blending. Duck should be yellow everywhere.</li>
|
|
<li>Simple blending. Duck should be a horizontal rainbow inside, and blue on overflow.</li>
|
|
<li>Parent is a stacking context. Duck should be a horizontal rainbow inside, and yellow on overflow (since there is no background there to blend with).</li>
|
|
<li>Intermediate parent - no stacking context. Duck should be a vertical gradient inside, and blue on overflow.</li>
|
|
<li>Intermediate parent with grandparent stacking context. Duck should be a vertical gradient inside, and yellow on overflow.</li>
|
|
<li>Intermediate parent has overflow. Duck should be a vertical gradient inside, and overflow is hidden.</li>
|
|
</ol>
|
|
|
|
<!-- no blending -->
|
|
<div class="example">
|
|
<div class="blendingbg">
|
|
<img src="resources/ducky.png">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- normal blending -->
|
|
<div class="example">
|
|
<div class="blendingbg">
|
|
<img src="resources/ducky.png" style="mix-blend-mode: difference;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- parent is a stacking context -->
|
|
<div class="example">
|
|
<div class="accelerated blendingbg">
|
|
<img src="resources/ducky.png" style="mix-blend-mode: difference;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- intermediate hierarchy -->
|
|
<div class="example">
|
|
<div class="blendingbg">
|
|
<div class="intermediate">
|
|
<img src="resources/ducky.png" style="mix-blend-mode: difference;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- intermediate hierarchy with stacking context -->
|
|
<div class="example">
|
|
<div class="accelerated blendingbg">
|
|
<div class="intermediate">
|
|
<img src="resources/ducky.png" style="mix-blend-mode: difference;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- intermediate hierarchy that overflows -->
|
|
<div class="example">
|
|
<div class="accelerated blendingbg">
|
|
<div class="intermediate" style="overflow: hidden">
|
|
<img src="resources/ducky.png" style="mix-blend-mode: difference;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</body>
|