add text effects

This commit is contained in:
Dennis Eichhorn 2020-10-09 15:33:58 +02:00
parent 788835a910
commit 6f0f7dadcb

View File

@ -15,4 +15,48 @@ p {
.blurry-text {
text-shadow: 0 0 .9rem #000;
color: transparent;
}
}
.white-3d {
color: #fff;
font-weight: bold;
font-family: sans-serif;
text-shadow:
0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.rainbow {
background: linear-gradient(90deg,#ab6bff,#9ad5f9 15%,#575df0 35%,#ab6bff 50%,#9ad5f9 65%,#575df0 85%,#ab6bff);
background-size: 200% 100%;
animation: rainbow-gradient 3.5s linear infinite;
backface-visibility: hidden;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes rainbow-gradient {
0% {
background-position: 0;
}
100% {
background-position: -100%;
}
0% {
background-position: 0;
}
100% {
background-position: -100%;
}
}