gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix blur

Browse Source
This commit is contained in:
yury 2024-06-22 05:01:43 +03:00
parent 101b451a38
commit fb864abe80
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/BlurComponent/styles.scss
View File

@ -26,68 +26,68 @@
&::before {
content: "";
z-index: 1;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
-webkit-backdrop-filter: blur(0.5px);
backdrop-filter: blur(0.5px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
}
& > div:nth-of-type(1) {
z-index: 2;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
mask: linear-gradient(to bottom, rgba(255, 255, 255, 0) 13%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0) 50%);
backdrop-filter: blur(1px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
}
& > div:nth-of-type(2) {
z-index: 3;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
/* margin-top: 10px; */
backdrop-filter: blur(2px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
}
& > div:nth-of-type(3) {
z-index: -7;
backdrop-filter: blur(4px);
z-index: 4;
-webkit-backdrop-filter: blur(4px);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
margin-top: 20px;
backdrop-filter: blur(4px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
}
& > div:nth-of-type(4) {
z-index: -14;
backdrop-filter: blur(8px);
z-index: 5;
-webkit-backdrop-filter: blur(8px);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
margin-top: 28px;
backdrop-filter: blur(8px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
}
& > div:nth-of-type(5) {
z-index: -16;
backdrop-filter: blur(16px);
z-index: 6;
-webkit-backdrop-filter: blur(16px);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
margin-top: 31px;
backdrop-filter: blur(16px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
}
& > div:nth-of-type(6) {
z-index: -20;
backdrop-filter: blur(32px);
z-index: 7;
-webkit-backdrop-filter: blur(32px);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
margin-top: 33px;
backdrop-filter: blur(32px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
}
&::after {
content: "";
z-index: 8;
-webkit-backdrop-filter: blur(64px);
backdrop-filter: blur(64px);
mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%
);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
}
}
}