Beispiel:CSS3 filter-grayscale.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:Grundlayout.css">
<title>filter:grayscale</title>
<style>
:root {
--grayness: 0.5; /* Wird vom Script verändert und von den Filtern genutzt */
}
/* figure-Element hat grayscale- oder saturate-Klasse zur Auswahl des Verfahrens */
.grayscale img {
filter: grayscale(var(--grayness));
}
.saturate img {
/* Zeige: Sättigung ist "1 minus Graustärke" */
filter: saturate(calc(1 - var(--grayness)));
}
/* Bilder zu zweit nebeneinander. Ist Platz genug, dann vier */
.gallery {
display: grid;
gap: 1em;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
}
@media (width > 40em) {
.gallery {
grid-template-columns: repeat(4, 1fr);
}
}
/* Bild und figcaption am unteren Rand des Grid-Items anordnen */
figure {
display: flex;
flex-flow: column;
justify-content: end;
align-items: center;
margin: 0;
}
figure img {
max-width: 10em;
width: 100%;
}
figure figcaption {
white-space: pre-line;
}
body {
padding: 0 8px;
}
#settings {
display: grid;
grid-template-columns: 1fr;
gap: 0.2em 1em;
margin: 1em 0;
}
#settings output {
justify-self: center;
}
#settings output::after {
content: ' %';
}
@media (width > 25em) {
#settings {
grid-template-columns: auto 1fr;
}
#settings output {
grid-column-start: 2;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const graynessCtrl = document.querySelector("#grayness");
graynessCtrl.addEventListener("input", updateGrayness);
updateGrayness();
function updateGrayness() {
const grayness = graynessCtrl.valueAsNumber;
document.querySelector("#settings output").value=grayness;
document.body.style.setProperty("--grayness", grayness/100);
document
.querySelectorAll(".grayscale figcaption")
.forEach(el => el.textContent = `filter:\ngrayscale(${grayness}%);`)
document
.querySelectorAll(".saturate figcaption")
.forEach(el => el.textContent = `filter:\nsaturate(${100-grayness}%);`)
}
});
</script>
</head>
<body>
<h1>Auswirkung von <code>filter:grayscale</code></h1>
<main>
<p>Spielen Sie mit dem Graustufenwert und vergleichen Sie grayscale und saturate</p>
<fieldset id="settings">
<legend>Einstellung</legend>
<label for="grayness">Graustufenwert: </label>
<input id="grayness" type="range" min="0" max="100" step="1" value="50">
<output>0</output>
</fieldset>
<div class="gallery">
<figure class="grayscale">
<img src="https://wiki.selfhtml.org/images/2/21/Burg.svg" alt="Burg">
<figcaption></figcaption>
</figure>
<figure class="saturate">
<img src="https://wiki.selfhtml.org/images/2/21/Burg.svg" alt="Burg">
<figcaption></figcaption>
</figure>
<figure class="grayscale">
<img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf a. d. Pegnitz">
<figcaption></figcaption>
</figure>
<figure class="saturate">
<img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf a. d. Pegnitz">
<figcaption></figcaption>
</figure>
</div>
</main>
</body>
</html>
