Last active
April 19, 2020 07:40
-
-
Save WebMechanic/1aaf22e3fee2b327d17af3e33567c365 to your computer and use it in GitHub Desktop.
background-blend-mode - Examples
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> | |
| <meta charset="utf-8"> | |
| <title>background-blend-mode - Examples - code sample</title> | |
| <style> | |
| #div { | |
| width: 360px; | |
| height: 360px; | |
| background-position: center; | |
| background-color: transparent; | |
| border: 10px solid transparent; | |
| border-image: repeating-linear-gradient( | |
| 45deg, | |
| #000, #000 9px, | |
| var(--gray50) 9px, var(--gray50) 18px, | |
| #fff 18px, #fff 36px) 10; | |
| /* for the linear-gradient */ | |
| --rot: 135deg; | |
| --gray25: hsla(0,0%,25%,var(--opac,1)); | |
| --gray50: hsla(0,0%,50%,var(--opac,1)); | |
| --gray75: hsla(0,0%,75%,var(--opac,1)); | |
| --gradient:var(--rot), | |
| white, white 20%, | |
| var(--gray75) 20%, var(--gray75) 40%, | |
| var(--gray50) 40%, var(--gray50) 60%, | |
| var(--gray25) 60%, var(--gray25) 80%, | |
| black 80%, black; | |
| /* SQUARE + PORTRAIT */ | |
| --foto: url('https://i.picsum.photos/id/102/250/250.jpg'); | |
| /* --foto: url('https://unsplash.com/photos/me8ZqH39Qto/download?force=true&w=400'); */ | |
| /* LANDSCAPE */ | |
| /* --foto: url('https://unsplash.com/photos/QHw-iVrVq94/download?force=true&w=400'); */ | |
| /* --foto: url('https://unsplash.com/photos/fuT-m1yzUG4/download?force=true&w=400'); */ | |
| background-image: var(--foto),linear-gradient(var(--gradient)); | |
| /* input range value overwrites */ | |
| --opac: 1; | |
| /* selected option overrides */ | |
| background-blend-mode: normal; | |
| } | |
| /* flip image layers */ | |
| #div.flipped { | |
| background-image: linear-gradient(var(--gradient)), var(--foto); | |
| } | |
| #hints > :not(.flipped), | |
| #hints.flipped > .flipped {display:revert} | |
| #hints > .flipped {display:none;font-style:italic} | |
| #controls { | |
| display: inline-flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| height: 9em; | |
| align-items: start; | |
| } | |
| #controls > * {min-width:230px;width:80%} | |
| #controls * {line-height:1;vertical-align:middle} | |
| body {display: flex} | |
| #div {flex:0 0 360px} | |
| #controls {flex:0 1 auto;margin: 9px 1em} | |
| #hints {flex:1 1 auto} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="div"></div> | |
| <div id="controls"> | |
| <select id="select" autofocus> | |
| <!-- garden variety photo editing app groups --> | |
| <optgroup label="Normal"><!-- NORMAL MODE --> | |
| <option selected="">normal</option> | |
| <optgroup label="Darken"><!-- DARKEN MODES --> | |
| <option>darken</option> | |
| <option>multiply</option> | |
| <option>color-burn</option> | |
| <optgroup label="Lighten"><!-- LIGHTEN MODES --> | |
| <option>lighten</option> | |
| <option>screen</option> | |
| <option>color-dodge</option> | |
| <optgroup label="Contrast"><!-- CONTRAST MODES --> | |
| <option>overlay</option> | |
| <option>soft-light</option> | |
| <option>hard-light</option> | |
| <optgroup label="Inversion"><!-- INVERSION MODES --> | |
| <option>difference</option> | |
| <option>exclusion</option> | |
| <optgroup label="Component"><!-- COMPONENT MODES --> | |
| <option>hue</option> | |
| <option>saturation</option> | |
| <option>color</option> | |
| <option>luminosity</option> | |
| </select> | |
| <span><input id="opac" type="range" list="tickmarks" value="1" step="0.1" min="0" max="1"><label onclick="if (theOpac) theOpac.value=0.6" for="opac" title="apply opacity to the blended source"> Opacity</label></span> | |
| <datalist id="tickmarks"> <option value="0"></option> <option value="0.20"></option> <option value="0.40"></option> <option value="0.60"></option> <option value="0.80"></option> <option value="1"></option> </datalist> | |
| <span><input id="flip" type="checkbox"><label for="flip" title="flip background and foreground layers"> flip layers </label></span> | |
| <p>Based on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Examples">MDN example</a>.</p> | |
| </div> | |
| <dl id="hints"> | |
| <dt><b>Normal Mode: </b> | |
| <dd class="normal">top layer fully visible (source alpha transparency applies)</dd> | |
| <dd class="normal flipped">black and white remain opaque, greys visibility based on opacity</dd> | |
| <dt><b>Darken Modes: </b> | |
| <dd class="darken">darken & multiply: white is always transparent (has no effect, acts like a mask); color-burn is less harsh with opacity with black & white always opaque</dd> | |
| <dd class="darken flipped">color-burn has managable <q>contrasting</q> control with opacity; black always clips, white always transparent</dd> | |
| <dt><b>Lighten Modes: </b> | |
| <dd class="lighten">lighten & screen: black is always transparent (has no effect, acts like a mask); color-dodge is less harsh with opacity</dd> | |
| <dd class="lighten flipped">color-dodge has managable <q>wash out</q> control with opacity; white always clips, black always transparent</dd> | |
| <dt><b>Contrast Modes: </b> | |
| <dd class="contrast">a 50:50 mix of multiply and screen to modify contrast (adjust with opacity)</dd> | |
| <dd class="contrast">50% grey is always transparent (has no effect) | |
| <dd class="contrast flipped">soft-light and hard-light with opacity applied flip behaviour</dd> | |
| <dt><b>Inversion Modes: </b> | |
| <dd class="inversion">white always transparent, greys > 50% always opaque, black always 100% inverted</dd> | |
| <dt><b>Component Modes: </b> | |
| <dd class="component">hue and saturation need opacity</dd> | |
| <dd class="component flipped">hue and saturation produce greyscale/monochrome images at 100% opacity</dd> | |
| <dd class="contrast"> others: black and white remain opaque</dd> | |
| </dl> | |
| <script> | |
| /* The Elements */ | |
| var theDiv = document.getElementById("div"); | |
| var theList = document.getElementById("select"); | |
| var theOpac = document.getElementById("opac"); | |
| var theFlip = document.getElementById("flip"); | |
| var theHint = document.getElementById("hints"); | |
| theList.onchange = function(event) { | |
| theDiv.style.backgroundBlendMode = event.target.selectedOptions[0].textContent; | |
| theOpac.enabled = (theList.selectedIndex > 0); | |
| } | |
| theOpac.onchange = function(event) { | |
| /* theDiv.style.setProperty("--opac", (event.target.checked ? 0.60 : 1.0).toString() ); */ | |
| theDiv.style.setProperty("--opac", event.target.value); | |
| event.target.title = (parseFloat(event.target.value) * 100).toString() + '% Opacity'; | |
| } | |
| theFlip.onchange = function(event) { | |
| theDiv.className = theHint.className = event.target.checked ? "flipped" : ""; | |
| } | |
| /* set defaults */ | |
| theList.selectedIndex = 7; | |
| theList.dispatchEvent(new UIEvent("change")); | |
| /* theOpac.checked = false; */ | |
| theOpac.value = 1; | |
| theFlip.checked = false; | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment