framer navbar effect

2024-12-02 13:43:08 +01:00
parent b0664a82dc
commit 400cc17f00
3 changed files with 64 additions and 37 deletions
@@ -127,3 +127,28 @@ body {
    );
  }
 }
+
+nav.navbar {
+  background-color: transparent;
+  background-image: radial-gradient(
+    transparent 1px,
+    var(--token-f32baa44-90b8-42a5-8bca-ffba9d95b23a, hsl(var(--background)))
+      1px
+  );
+  background-size: 4px 4px;
+  backdrop-filter: blur(3px);
+  mask: linear-gradient(rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
+  opacity: 1;
+}
+
+nav.navbar::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--accent);
+  opacity: 0.2;
+}