Last active
February 25, 2016 02:03
-
-
Save royling/a758ba977c4cbf3751d9 to your computer and use it in GitHub Desktop.
CSS blending
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>CSS Blending</title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div> | |
| <input id="backdropColor" type="text" placeholder="Backdrop color, eg. #ffffff/white"><br> | |
| <input id="sourceColor" type="text" placeholder="Source color, eg. #000000/black"><br> | |
| <select name="blendingMode" id="blendingMode"></select> | |
| </div> | |
| <svg class="canvas"> | |
| <circle id="backdrop" cx="120" cy="120" r="120"/> | |
| <circle id="source" cx="240" cy="120" r="120"/> | |
| </svg> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .canvas { | |
| width: 360px; | |
| height: 240px; | |
| margin: 30px auto; | |
| } | |
| circle { | |
| transition: fill 2s; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| const backdrop = document.querySelector('#backdrop'), | |
| source = document.querySelector('#source'), | |
| backdropColorInput = document.querySelector('#backdropColor'), | |
| sourceColorInput = document.querySelector('#sourceColor'), | |
| modeSelector = document.querySelector('#blendingMode'); | |
| const blendingModes = { | |
| "Separable": [ | |
| "normal", | |
| "multiply", | |
| "screen", | |
| "overlay", | |
| "darken", | |
| "lighten", | |
| "color-dodge", | |
| "color-burn", | |
| "hard-light", | |
| "soft-light", | |
| "difference", | |
| "exclusion" | |
| ], | |
| "Non-separable": [ | |
| "hue", | |
| "saturation", | |
| "color", | |
| "luminosity" | |
| ] | |
| }; | |
| const initModeOptions = () => { | |
| modeSelector.innerHTML = Object.keys(blendingModes).map(group => { | |
| let options = blendingModes[group].map(mode => `<option value="${mode}">${mode}</option>`).join(''); | |
| return `<optgroup label="${group}">${options}</optgroup>`; | |
| }).join(''); | |
| // select first option | |
| modeSelector.querySelector('option').setAttribute('selected', 'selected'); | |
| }; | |
| initModeOptions(); | |
| const showEffect = () => { | |
| backdrop.setAttribute('fill', backdropColorInput.value || '#f00'); | |
| source.setAttribute('fill', sourceColorInput.value || '#00f'); | |
| backdrop.style.mixBlendMode = source.style.mixBlendMode = modeSelector.value || 'normal'; | |
| }; | |
| [backdropColorInput, sourceColorInput, modeSelector].forEach(elem => { | |
| elem.addEventListener('change', showEffect, false); | |
| }); | |
| showEffect(); // init display |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
JSFiddle