45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
<script>
|
|
if (window.internals)
|
|
window.internals.settings.setAcceleratedCompositingEnabled(true);
|
|
</script>
|
|
|
|
<style>
|
|
img {
|
|
width: 130px;
|
|
height: 130px;
|
|
}
|
|
|
|
li {
|
|
margin: 5px;
|
|
width: 130px;
|
|
height: 130px;
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0ff), color-stop(24%,#00f), color-stop(50%,#f00), color-stop(75%,#ff0), color-stop(100%,#0f0));
|
|
display: block;
|
|
float: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<!-- This file should contain a duck on top of a gradient with every type of blending. -->
|
|
<body>
|
|
<ul>
|
|
<!-- Separable blend modes -->
|
|
<li><img style="mix-blend-mode: normal" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: overlay" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: screen" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: overlay" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: darken" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: lighten" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: color-dodge" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: color-burn" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: hard-light" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: soft-light" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: difference" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: exclusion" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: plus-darker" src="resources/ducky.png"></li>
|
|
<li><img style="mix-blend-mode: plus-lighter" src="resources/ducky.png"></li>
|
|
</ul>
|
|
</body>
|