SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
Beispiel:Rgb-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Farbmischer</title>
<style>
.helferlein-color-picker {
width: fit-content;
margin: auto;
}
.helferlein-color-picker aside {
border: thin solid #000;
display: inline-block;
height: 255px;
position: relative;
vertical-align: top;
width: 255px
}
.helferlein-color-picker aside.result {
--red: 255;
--green: 161;
--blue: 40;
color: #fff;
font-family: monospace;
font-size: 200%;
align-content: center;
text-align: center;
text-shadow: 0 0 1px #000;
text-transform: uppercase;
}
.rgb-select p {
display: flex;
justify-content: center;
gap: 0.5em;
}
.rgb-select p *:is(label,output) {
flex: 0 0 2em;
}
#red {
accent-color: red;
}
#green {
accent-color: lime;
}
#blue {
accent-color: blue;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const colorSelect = document.querySelector('.rgb-select');
const result = document.querySelector('.result');
function setColor(color) {
const value = document.querySelector('.rgb-select [name='+color+']').valueAsNumber;
result.style.setProperty('--'+color, value);
document.querySelector('.rgb-select output.'+color).textContent = value;
document.querySelector('.result output.'+color).textContent = value;
}
function colorMix(event) {
setColor('red');
setColor('green');
setColor('blue');
}
colorSelect.addEventListener('input', colorMix);
colorMix();
});
</script>
</head>
<body>
<form class="helferlein-color-picker">
<aside class="rgb-select">
<h3>RGB-Werte</h3>
<p>
<label for="red">Rot</label>
<input id="red" name="red" type="range" max="255" min="0" value="255">
<output class="red">255</output>
</p>
<p>
<label for="green">Grün</label>
<input id="green" name="green" type="range" max="255" min="0" value="161">
<output class="green">161</output>
</p>
<p>
<label for="blue">Blau</label>
<input id="blue" name="blue" type="range" max="255" min="0" value="40">
<output class="blue">40</output>
</p>
</aside>
<aside class="result" style="background-color: rgb(var(--red) var(--green) var(--blue));">
rgb(<output class="red"></output>
<output class="green"></output>
<output class="blue"></output>)
</aside>
</body>
</html>
