artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 14:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds new module for glass like effects

Browse Source
This commit is contained in:
mrmrs 2023-09-06 09:09:11 -07:00
parent 4af2f07c72
commit 010de553ce
1 changed files with 202 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/_glass.css Normal file
View File

@ -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);
}