From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 25 Feb 2024 05:37:08 +0000 (-0800)
Subject: Add peeking-rainbow-background card
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=2ff0bb0f36cf9c46928d741d0a1b47f4c63c4206;p=css-loaders

Add peeking-rainbow-background card
---

diff --git a/index.html b/index.html
index aaece97..50b2415 100644
--- a/index.html
+++ b/index.html
@@ -320,6 +320,39 @@
       transition: padding 200ms, border 200ms, box-shadow 200ms;
     }
 
+    .card.peeking-rainbow-background {
+      position: relative;
+    }
+
+    .card.peeking-rainbow-background::before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      bottom: calc(100% - 10px);
+      width: 100%;
+      border-radius: 10px 10px 0 0;
+      background-image: linear-gradient(transparent, white),
+        linear-gradient(90deg,
+          hsl(360deg 80% 50% / 0.25),
+          hsl(315deg 80% 50% / 0.25),
+          hsl(270deg 80% 50% / 0.25),
+          hsl(225deg 80% 50% / 0.25),
+          hsl(180deg 80% 50% / 0.25),
+          hsl(135deg 80% 50% / 0.25),
+          hsl(90deg 80% 50% / 0.25),
+          hsl(45deg 80% 50% / 0.25),
+          hsl(0deg 80% 50% / 0.25)
+        );
+        transition: bottom 400ms;
+    }
+
+    .card.peeking-rainbow-background:hover::before {
+      bottom: 0;
+      transition: bottom 200ms;
+    }
+
     /* Button hovers */
 
     button {
@@ -623,6 +656,11 @@
         <h2>Big box shadow</h2>
         <p>A big box shadow will appear around this card when this card is hovered or focused.</p>
       </div>
+
+      <div class="card peeking-rainbow-background">
+        <h2>Peeking rainbow background</h2>
+        <p>This card has a subtle rainbow gradient at the top border which will expand on hover or focus.</p>
+      </div>
     </section>
 
     <section>