Add a separate file for realistic shadows

aadhithbala · Jul 22, 2023 · 4b24a00 · 4b24a00
1 parent c9e9b9c
commit 4b24a00
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 4 deletions.
diff --git a/assets/icons/bullhorn.svg b/assets/icons/bullhorn.svg
diff --git a/assets/icons/donate.svg b/assets/icons/donate.svg
diff --git a/assets/icons/foster.svg b/assets/icons/foster.svg
diff --git a/assets/icons/volunteer.svg b/assets/icons/volunteer.svg
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>The Cat Lounge</title>
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="shadow.css" />
     <script src="script.js" defer></script>
   </head>
   <body>

diff --git a/shadow.css b/shadow.css
@@ -0,0 +1,22 @@
+:root {
+  --shadow-color: 145deg 33% 52%;
+  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
+    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.35),
+    1px 2px 2.5px -2.4px hsl(var(--shadow-color) / 0.35);
+  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
+    0.8px 1.7px 2.1px -0.8px hsl(var(--shadow-color) / 0.36),
+    2.1px 4.2px 5.3px -1.6px hsl(var(--shadow-color) / 0.37),
+    5.1px 10.1px 12.8px -2.4px hsl(var(--shadow-color) / 0.37);
+  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
+    1.5px 3px 3.8px -0.4px hsl(var(--shadow-color) / 0.34),
+    2.8px 5.6px 7.1px -0.7px hsl(var(--shadow-color) / 0.34),
+    4.6px 9.2px 11.6px -1px hsl(var(--shadow-color) / 0.34),
+    7.3px 14.7px 18.6px -1.4px hsl(var(--shadow-color) / 0.34),
+    11.4px 22.8px 28.9px -1.8px hsl(var(--shadow-color) / 0.34),
+    17.3px 34.7px 43.9px -2.1px hsl(var(--shadow-color) / 0.35),
+    25.5px 51px 64.6px -2.4px hsl(var(--shadow-color) / 0.35);
+}
+
+.card-box {
+  box-shadow: var(--shadow-elevation-medium);
+}