From 6f0f7dadcb1a4d41e2ab74c2df28de81eba24c34 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Fri, 9 Oct 2020 15:33:58 +0200
Subject: [PATCH] add text effects

---
 text.scss | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/text.scss b/text.scss
index 04ffdca..183031b 100644
--- a/text.scss
+++ b/text.scss
@@ -15,4 +15,48 @@ p {
 .blurry-text {
     text-shadow: 0 0 .9rem #000;
     color: transparent;
-}
\ No newline at end of file
+}
+
+.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%;
+    }
+}