From d630d03c4f8a9b8c2d571dd2872024911ff1d218 Mon Sep 17 00:00:00 2001
From: bt <bt@web>
Date: Tue, 12 Dec 2023 13:58:29 -0500
Subject:

---
 posts/better-box-shadows.md | 51 +++------------------------------------------
 1 file changed, 3 insertions(+), 48 deletions(-)

(limited to 'posts')

diff --git a/posts/better-box-shadows.md b/posts/better-box-shadows.md
index 5423468..3ba6834 100644
--- a/posts/better-box-shadows.md
+++ b/posts/better-box-shadows.md
@@ -1,39 +1,6 @@
 [[!meta title="Better Box Shadows"]]
 [[!meta date="2019-01-08"]]
 
-<style>
-  .message {
-      position: relative;
-      z-index: 1;
-  }
-  .box-container,
-  .box-container-depth {
-    background: white;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    border: 1px solid #eee;
-    border-radius: 10px;
-    margin: 2rem auto;
-    padding: 10px;
-    position: relative;
-    height: 200px;
-    width: 250px;
-  }
-  .box-container-depth { box-shadow: none; }
-  .box-container-depth .box-container-depth-inner {
-    bottom: 0;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    content:'';
-    position: absolute;
-    width: 94%;
-    height: 94%;
-    left: 3%;
-    z-index: -1;
-  }
-  .box-container-depth-inner.blur {
-      filter: blur(6px);
-  }
-</style>
-
 Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general.
 
 Let's take a look at a default configuration of `box-shadow`:
@@ -65,12 +32,6 @@ We should also add some minimal styling to cleanup the `.box-container` a little
     }
 
 
-Which would render as this:
-
-
-<div class="box-container"></div>
-
-
 Not bad - but we can do a lot better than this.
 
 ## Please sir, I want some more (depth)
@@ -118,11 +79,7 @@ We also need to target the `box-container-inner` element set inside the current
     }
 
 
-Which will make the drop-shadow render with a little more realistic depth:
-
-
-<div class="box-container-depth"><span class="box-container-depth-inner"></span></div>
-
+Which will make the drop-shadow render with a little more realistic depth.
 
 
 ## But wait - there's more!
@@ -155,11 +112,9 @@ So your final code would look like this:
     }
 
 
-Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:
+Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth.
 
 
-<div class="box-container-depth">
-    <span class="box-container-depth-inner blur"></span>
-</div>
+Take a look at all the examples in the [CodePen examples](https://codepen.io/bradleytaunt/pen/dyNbZNj)
 
 
-- 
cgit v1.2.3-54-g00ecf