Beispiel:CSS3-blend-mode.html
Aus SELFHTML-Wiki
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<style>
#example {
width: 250px;
height: 250px;
margin: 5em 3em;
background-image: url("https://wiki.selfhtml.org/images/a/a9/Selflogo.png"), url("https://wiki.selfhtml.org/images/e/e8/Rainbow.jpg");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
box-shadow: 5px 5px 5px 0 #aaaaaa;
background-blend-mode: normal;
}
div {
display: inline-block;
}
.test,
.test li {
list-style: none;
margin: 0;
padding: 0;
}
.test input[type="radio"]:checked ~ label {
color: #8f0;
text-shadow: 0 0 7px black;
}
</style>
<script>
(function () {
document.addEventListener("DOMContentLoaded", function () {
// erlaubte Werte aus der Liste zu Radio-Buttons machen
var example = document.getElementById("example"),
lis = document.querySelectorAll("h2 ~ ul > li");
if (example && lis.length) {
// alle <li> mit Radiobutton erweitern
Array.prototype.slice.call(lis).forEach(function (l, i) {
var id = "r_" + i,
label = document.createElement("label"),
radio = document.createElement("input");
radio.id = id;
radio.name = "test";
radio.type = "radio";
radio.value = l.textContent.replace(/^\w*(\W+)\w+$/, "$1");
label.htmlFor = id;
// alle Kind-Elemente ins <label> verschieben
while (l.firstChild) {
label.appendChild(l.firstChild);
}
l.appendChild(radio);
l.appendChild(label);
// ersten Radio-Button vorselektieren
if (!i) {
radio.checked = true;
radio.focus();
}
// Veränderung bemerken und auf die Vorschau anwenden
radio.addEventListener("change", function () {
if (radio.checked) {
example.style.backgroundBlendMode = radio.value;
}
});
});
// <ul> visuell anpassen
lis[0].parentNode.className = "test";
}
});
}());
</script>
<title>Beispiel blend-mode</title>
</head>
<body>
<h1>Demonstration von Blendmodi</h1>
<main>
<div id="example"></div>
<div>
<h2>erlaubte Werte</h2>
<ul>
<li><code>normal</code></li>
<li><code>multiply</code></li>
<li><code>screen</code></li>
<li><code>overlay</code></li>
<li><code>darken</code></li>
<li><code>lighten</code></li>
<li><code>color-dodge</code></li>
<li><code>color-burn</code></li>
<li><code>hard-light</code></li>
<li><code>soft-light</code></li>
<li><code>difference</code></li>
<li><code>exclusion</code></li>
<li><code>hue</code></li>
<li><code>saturation</code></li>
<li><code>color</code></li>
<li><code>luminosity</code></li>
</ul>
</div>
<p>Bildquelle: <a href="https://commons.wikimedia.org/wiki/File:WhereRainbowRises.jpg">commons.wikimedia.org/wiki/File:WhereRainbowRises.jpg</a></p>
</main>
</body>
</html>
