Skip to content

Commit

Permalink
Adds new module for glass like effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrmrs
mrmrs committed Sep 6, 2023
1 parent 4af2f07 commit 010de55
Showing 1 changed file with 202 additions and 0 deletions.
202 changes: 202 additions & 0 deletions src/_glass.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
.glass1 {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass2 {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass3 {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass4 {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass5 {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass6 {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass7 {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass8 {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass9 {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass10 {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass1-hover:hover {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass2-hover:hover {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass3-hover:hover {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass4-hover:hover {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass5-hover:hover {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass6-hover:hover {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass7-hover:hover {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass8-hover:hover {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass9-hover:hover {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass10-hover:hover {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass1-focus:focus {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass2-focus:focus {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass3-focus:focus {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass4-focus:focus {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass5-focus:focus {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass6-focus:focus {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass7-focus:focus {
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass8-focus:focus {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass9-focus:focus {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass10-focus:focus {
background: rgba(255, 255, 255, 0);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}

0 comments on commit 010de55

Please sign in to comment.