--
This commit is contained in:
@@ -15,6 +15,7 @@ header {
|
||||
will-change: transform;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
}
|
||||
header::after {
|
||||
content: '';
|
||||
@@ -25,21 +26,24 @@ header::after {
|
||||
pointer-events: none;
|
||||
}
|
||||
.header-blur {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.blur-layer {
|
||||
.header-blur > div {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
backdrop-filter: blur(var(--blur));
|
||||
-webkit-backdrop-filter: blur(var(--blur));
|
||||
-webkit-mask-image: var(--mask);
|
||||
mask-image: var(--mask);
|
||||
-webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
|
||||
mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
|
||||
}
|
||||
.header-blur > div:nth-child(1) { --blur: 1px; --from: 0%; --to: 20%; }
|
||||
.header-blur > div:nth-child(2) { --blur: 2px; --from: 20%; --to: 40%; }
|
||||
.header-blur > div:nth-child(3) { --blur: 4px; --from: 40%; --to: 60%; }
|
||||
.header-blur > div:nth-child(4) { --blur: 8px; --from: 60%; --to: 80%; }
|
||||
.header-blur > div:nth-child(5) { --blur: 16px; --from: 80%; --to: 100%; }
|
||||
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
|
||||
Reference in New Issue
Block a user