mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
148 lines
3.3 KiB
HTML
148 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Backdrop Filter</title>
|
|
<style>
|
|
.image-box {
|
|
background-image: url(old-computer.png);
|
|
height: 240px;
|
|
width: 350px;
|
|
background-size: cover;
|
|
border: 2px solid black;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 5px;
|
|
}
|
|
|
|
|
|
.backdrop-box {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 5px;
|
|
width: 50%;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
code {
|
|
text-shadow: 1px 1px 2px black;
|
|
color: white;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.blur {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.invert {
|
|
backdrop-filter: invert();
|
|
}
|
|
|
|
.grayscale {
|
|
backdrop-filter: grayscale();
|
|
}
|
|
|
|
.brightness {
|
|
backdrop-filter: brightness(200%);
|
|
}
|
|
|
|
.contrast {
|
|
backdrop-filter: contrast(200%);
|
|
}
|
|
|
|
.sepia {
|
|
backdrop-filter: sepia();
|
|
}
|
|
|
|
.grayscale-invert-blur {
|
|
backdrop-filter: grayscale() invert() blur(5px);
|
|
}
|
|
|
|
.mixed {
|
|
backdrop-filter: grayscale(50%) invert(70%);
|
|
}
|
|
|
|
.hue-rotate {
|
|
backdrop-filter: hue-rotate(60deg);
|
|
}
|
|
|
|
.saturate {
|
|
backdrop-filter: saturate(4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="image-box">
|
|
<div class="backdrop-box grayscale-invert-blur">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box mixed">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box blur">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box invert">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box grayscale">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box brightness">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box contrast">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box sepia">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box hue-rotate">
|
|
</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<div class="backdrop-box saturate">
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const boxes = document.querySelectorAll(".backdrop-box");
|
|
const filterMap = {};
|
|
for (const rule of document.styleSheets[0].cssRules) {
|
|
filterMap[rule.selectorText] = rule.style.backdropFilter;
|
|
}
|
|
|
|
updateLabels = () => {
|
|
boxes.forEach(box => {
|
|
const filter = box.classList[1];
|
|
const cssText = filterMap['.'+filter];
|
|
let el = document.getElementById(filter);
|
|
let newEl = document.createElement('code');
|
|
let text = document.createTextNode(box.style.backdropFilter || cssText);
|
|
newEl.appendChild(text);
|
|
newEl.id = filter;
|
|
if (!el)
|
|
box.appendChild(newEl)
|
|
else
|
|
box.replaceChild(newEl, el);
|
|
})
|
|
}
|
|
|
|
updateLabels();
|
|
</script>
|
|
</html>
|