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/better-box-shadows/index.html | 127 ++++++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 build/better-box-shadows/index.html (limited to 'build/better-box-shadows') diff --git a/build/better-box-shadows/index.html b/build/better-box-shadows/index.html new file mode 100644 index 0000000..5540d08 --- /dev/null +++ b/build/better-box-shadows/index.html @@ -0,0 +1,127 @@ + + + + + + + + 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