mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 12:17:44 +00:00
Base: Add example backdrop-filter using hue-rotate()
This commit is contained in:
parent
e697a72c99
commit
2a9128efe3
1 changed files with 8 additions and 0 deletions
|
@ -68,6 +68,10 @@
|
||||||
.mixed {
|
.mixed {
|
||||||
backdrop-filter: grayscale(50%) invert(70%);
|
backdrop-filter: grayscale(50%) invert(70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hue-rotate {
|
||||||
|
backdrop-filter: hue-rotate(60deg);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -103,6 +107,10 @@
|
||||||
<div class="backdrop-box sepia">
|
<div class="backdrop-box sepia">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="image-box">
|
||||||
|
<div class="backdrop-box hue-rotate">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
const boxes = document.querySelectorAll(".backdrop-box");
|
const boxes = document.querySelectorAll(".backdrop-box");
|
||||||
const filterMap = {};
|
const filterMap = {};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue