From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/better-box-shadows/index.html | 127 ------------------------------ 1 file changed, 127 deletions(-) delete mode 100644 build/posts/better-box-shadows/index.html (limited to 'build/posts/better-box-shadows/index.html') diff --git a/build/posts/better-box-shadows/index.html b/build/posts/better-box-shadows/index.html deleted file mode 100644 index 5540d08..0000000 --- a/build/posts/better-box-shadows/index.html +++ /dev/null @@ -1,127 +0,0 @@ - - - - - - - - Better Box Shadows - - - - - - - -
-

Better Box Shadows

-

2019-01-08

-

Box shadow on HTML 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:

-
.box-container {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-}
-
-

In the example above the first property number is the origin of the x-axis, the second number is the origin of the y-axis and the third is the amount of blur.

-

We should also add some minimal styling to cleanup the .box-container a little bit for our example:

-
<div class="box-container"></div>
-
-
-.box-container {
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    /* Styles to make it less ugly */
-    background: white;
-    border-radius: 10px;
-    border: 1px solid #eee;
-    height: 200px;
-    padding: 10px;
-    position: relative;
-    width: 250px;
-}
-
-

Which would render as this:

-

Not bad - but we can do a lot better than this.

-

Please sir, I want some more (depth)

-

We just need to add a simple child div (or use a pseudo element if you prefer) inside our main element we want to apply the shadow to:

-
<div class="box-container">
-    <div class="box-container-inner"></div>
-</div>
-
-

Now we make our inner child element absolute and set it’s height and width dynamically to be slightly smaller than it’s parent (percentages work best for this).

-

Remember to set this child element behind it’s parent by adding z-index: -1.

-
.box-container {
-    /* No box-shadow needed on this element anymore */
-    /* Styles to make it less ugly */
-    background: white;
-    border-radius: 10px;
-    border: 1px solid #eee;
-    height: 200px;
-    padding: 10px;
-    position: relative;
-    width: 250px;
-}
-
-

Inner Containers

-

We also need to target the box-container-inner element set inside the current parent to reflect our custom shadow styling:

-
.box-container-inner {
-    bottom: 0;
-    /* The box-shadow is added here now */
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    height: 94%;
-    left: 3%;
-    position: absolute;
-    width: 94%;
-    z-index: -1;
-}
-
-

Which will make the drop-shadow render with a little more realistic depth:

-

But wait - there’s more!

-

We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - filter:blur();.

-

So your final code would look like this:

-
.box-container {
-    /* Styles to make it less ugly */
-    background: white;
-    border-radius: 10px;
-    border: 1px solid #eee;
-    height: 200px;
-    padding: 10px;
-    position: relative;
-    width: 250px;
-}
-
-.box-container-inner {
-    bottom: 0;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    filter: blur(6px);
-    height: 94%;
-    left: 3%;
-    position: absolute;
-    width: 94%;
-    z-index: -1;
-}
-
-

Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:

- \ No newline at end of file -- cgit v1.2.3-54-g00ecf