RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 12:07:45 +00:00
Code Issues Activity Actions

Base: Add a backdrop-filter demo web page

Browse source
This commit is contained in:
MacDue 2022-09-15 08:31:40 +01:00 • committed by Sam Atkins
parent 011439d3e3
commit cfa9b44894
2 changed files with 132 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

131
Base/res/html/misc/backdrop-filter.html Normal file
View file

@ -0,0 +1,131 @@
<!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%);
}
</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>
<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>

1
Base/res/html/misc/welcome.html
View file

@ -107,6 +107,7 @@
<li><h3>Properties</h3></li> <li><h3>Properties</h3></li>
<li><a href="gradients.html">Gradients</a></li> <li><a href="gradients.html">Gradients</a></li>
<li><a href="vertical-align.html">vertical-align</a></li> <li><a href="vertical-align.html">vertical-align</a></li>
<li><a href="backdrop-filter.html">backdrop-filter</a></li>
<li><a href="backgrounds.html">Backgrounds</a></li> <li><a href="backgrounds.html">Backgrounds</a></li>
<li><a href="background-repeat-test.html">Background-repeat</a></li> <li><a href="background-repeat-test.html">Background-repeat</a></li>
<li><a href="box-shadow.html">Box-shadow</a></li> <li><a href="box-shadow.html">Box-shadow</a></li>