mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 15:07:45 +00:00
Base: Add a backdrop-filter
demo web page
This commit is contained in:
parent
011439d3e3
commit
cfa9b44894
2 changed files with 132 additions and 0 deletions
131
Base/res/html/misc/backdrop-filter.html
Normal file
131
Base/res/html/misc/backdrop-filter.html
Normal 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>
|
|
@ -107,6 +107,7 @@
|
|||
<li><h3>Properties</h3></li>
|
||||
<li><a href="gradients.html">Gradients</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="background-repeat-test.html">Background-repeat</a></li>
|
||||
<li><a href="box-shadow.html">Box-shadow</a></li>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue