Updated Aug 25 2024

jerrylovescheese · Aug 25, 2024 · 3833a99 · 3833a99
1 parent 72857d4
commit 3833a99
Show file tree

Hide file tree

Showing 4 changed files with 268 additions and 397 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/experiments/Jul_24_2024.html b/experiments/Jul_24_2024.html
@@ -4,66 +4,141 @@
 <head>
     <title>Marquee Effect</title>
     <style>
-        .marquee {
-            background-color: #ddd;
-            width: 500px;
-            margin: 0 auto;
-            overflow: hidden;
-            white-space: nowrap;
+        body {
+            background: #222;
         }
 
-        .marquee span {
-            display: inline-block;
-            font-size: 20px;
+        .tabs li {
+            /* Makes a horizontal row */
+            float: left;
+
+            /* So the psueudo elements can be
+     abs. positioned inside */
             position: relative;
-            left: 100%;
-            animation: marquee 8s linear infinite;
         }
 
-        .marquee:hover span {
-            animation-play-state: paused;
+        .tabs a {
+            /* Make them block level
+     and only as wide as they need */
+            float: left;
+            padding: 10px 40px;
+            text-decoration: none;
+
+            /* Default colors */
+            color: black;
+            background: #ddc385;
+
+            /* Only round the top corners */
+            -webkit-border-top-left-radius: 15px;
+            -webkit-border-top-right-radius: 15px;
+            -moz-border-radius-topleft: 15px;
+            -moz-border-radius-topright: 15px;
+            border-top-left-radius: 15px;
+            border-top-right-radius: 15px;
+        }
+
+        .tabs .active {
+            /* Highest, active tab is on top */
+            z-index: 3;
+        }
+
+        .tabs .active a {
+            /* Colors when tab is active */
+            background: white;
+            color: black;
+        }
+
+        .tabs li:before,
+        .tabs li:after,
+        .tabs li a:before,
+        .tabs li a:after {
+            /* All pseudo elements are 
+     abs. positioned and on bottom */
+            position: absolute;
+            bottom: 0;
         }
 
-        .marquee span:nth-child(1) {
-            animation-delay: 0s;
+        /* Only the first, last, and active
+   tabs need pseudo elements at all */
+        .tabs li:last-child:after,
+        .tabs li:last-child a:after,
+        .tabs li:first-child:before,
+        .tabs li:first-child a:before,
+        .tabs .active:after,
+        .tabs .active:before,
+        .tabs .active a:after,
+        .tabs .active a:before {
+            content: "";
         }
 
-        .marquee span:nth-child(2) {
-            animation-delay: 0.8s;
+        .tabs .active:before,
+        .tabs .active:after {
+            background: white;
+
+            /* Squares below circles */
+            z-index: 1;
         }
 
-        .marquee span:nth-child(3) {
-            animation-delay: 1.6s;
+        /* Squares */
+        .tabs li:before,
+        .tabs li:after {
+            background: #ddc385;
+            width: 10px;
+            height: 10px;
         }
 
-        .marquee span:nth-child(4) {
-            animation-delay: 2.4s;
+        .tabs li:before {
+            left: -10px;
         }
 
-        .marquee span:nth-child(5) {
-            animation-delay: 3.2s;
+        .tabs li:after {
+            right: -10px;
         }
 
-        @keyframes marquee {
-            0% {
-                left: 100%;
-            }
+        /* Circles */
+        .tabs li a:after,
+        .tabs li a:before {
+            width: 20px;
+            height: 20px;
+            /* Circles are circular */
+            -webkit-border-radius: 10px;
+            -moz-border-radius: 10px;
+            border-radius: 10px;
+            background: #222;
+
+            /* Circles over squares */
+            z-index: 2;
+        }
+
+        .tabs .active a:after,
+        .tabs .active a:before {
+            background: #ddc385;
+        }
+
+        /* First and last tabs have different
+   outside color needs */
+        .tabs li:first-child.active a:before,
+        .tabs li:last-child.active a:after {
+            background: #222;
+        }
+
+        .tabs li a:before {
+            left: -20px;
+        }
 
-            100% {
-                left: -100%;
-            }
+        .tabs li a:after {
+            right: -20px;
         }
     </style>
 </head>
 
 <body>
-    <p class="marquee">
-        <span>this is a</span>
-        <span>simple marquee</span>
-        <span>using css</span>
-        <span>only tech</span>
-        <span>with a delay</span>
-    </p>
+    <ul class="tabs group">
+        <li class="active"><a href="#one">One</a></li>
+        <li><a href="#two">Two</a></li>
+        <li><a href="#three">Three</a></li>
+        <li><a href="#three">Four</a></li>
+    </ul>
 </body>
 
 </html>