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 { &::before {
content: ""; content: "";
z-index: 1; z-index: 1;
backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(0.5px);
-webkit-backdrop-filter: blur(1px); backdrop-filter: blur(0.5px);
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-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) { & > div:nth-of-type(1) {
z-index: 2; z-index: 2;
backdrop-filter: blur(1px);
-webkit-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) { & > div:nth-of-type(2) {
z-index: 3; z-index: 3;
backdrop-filter: blur(2px);
-webkit-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%); backdrop-filter: blur(2px);
/* margin-top: 10px; */ -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) { & > div:nth-of-type(3) {
z-index: -7; z-index: 4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); -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%); backdrop-filter: blur(4px);
margin-top: 20px; -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) { & > div:nth-of-type(4) {
z-index: -14; z-index: 5;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -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%); backdrop-filter: blur(8px);
margin-top: 28px; -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) { & > div:nth-of-type(5) {
z-index: -16; z-index: 6;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -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%); backdrop-filter: blur(16px);
margin-top: 31px; -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) { & > div:nth-of-type(6) {
z-index: -20; z-index: 7;
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px); -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%); backdrop-filter: blur(32px);
margin-top: 33px; -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 { &::after {
content: ""; content: "";
z-index: 8; z-index: 8;
-webkit-backdrop-filter: blur(64px);
backdrop-filter: blur(64px); backdrop-filter: blur(64px);
mask: linear-gradient( -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%
);
} }
} }
} }