| <!DOCTYPE HTML> |
| <head> |
| <style> |
| img { |
| width: 130px; |
| height: 130px; |
| -webkit-transform: translateZ(0); |
| } |
| |
| 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> |
