Wobbl/Wobbly-Website
1
0
Fork 0
Code Issues Pull requests Wiki Activity

Made some fancy styles.

Browse source
This commit is contained in:
The Wobbler 2024-10-22 15:35:45 +02:00
parent 905582ead2
commit 74bf595a2d
2 changed files with 162 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

83
styles.php
View file

@ -27,7 +27,7 @@ a {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 400px;
min-height: 800px;
border-radius: 16px;
}
@ -133,11 +133,90 @@ a {
.glass {
backdrop-filter: blur(4px);
border-radius: 16px;
margin: 8px;
margin: 32px 16px 64px;
animation-name: glassdiff;
animation-duration: 0.3s;
}
.glass:hover {
backdrop-filter: blur(0px);
border-radius: 16px;
animation-name: glassclear;
animation-duration: 0.3s;
}
@keyframes glassdiff {
0% {
backdrop-filter: blur(0px);
}
100% {
backdrop-filter: blur(4px);
}
}
@keyframes glassclear {
0% {
backdrop-filter: blur(4px);
}
100% {
backdrop-filter: blur(0px);
}
}
.inset {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
border: 1px solid rgba(255, 255, 255, 0.2);
animation-name: pushins;
animation-duration: 0.3s;
}
.inset:hover {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
-4px -4px 4px rgba(255, 255, 255, 0.2);
animation-name: pullins;
animation-duration: 0.3s;
}
@keyframes pushins {
0% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
-4px -4px 4px rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0),
-4px -4px 4px rgba(255, 255, 255, 0);
}
51% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0) inset,
-4px -4px 4px rgba(255, 255, 255, 0) inset;
}
100% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
}
}
@keyframes pullins {
0% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
}
50% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0) inset,
-4px -4px 4px rgba(255, 255, 255, 0) inset;
}
51% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0),
-4px -4px 4px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
-4px -4px 4px rgba(255, 255, 255, 0.2);
}
}
.ascii-art {
color: white;
background-color: rgba(51, 51, 51, 0.2);
}