From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/better-box-shadows/index.html | 109 ++++++++++++++++-------------------- 1 file changed, 49 insertions(+), 60 deletions(-) (limited to 'build/better-box-shadows') diff --git a/build/better-box-shadows/index.html b/build/better-box-shadows/index.html index cfca3d3..c1fc50e 100644 --- a/build/better-box-shadows/index.html +++ b/build/better-box-shadows/index.html @@ -1,66 +1,43 @@ - + Better Box Shadows - - + + +
-

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 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 {
+
+
<div class="box-container"></div>
+
+
+.box-container {
     box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    /* Styles to make it less ugly */
+    /* Styles to make it less ugly */
     background: white;
     border-radius: 10px;
     border: 1px solid #eee;
@@ -70,20 +47,27 @@
     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)

+
+
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>
+
+
<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.

+
+
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 */
+    /* No box-shadow needed on this element anymore */
+    /* Styles to make it less ugly */
     background: white;
     border-radius: 10px;
     border: 1px solid #eee;
@@ -93,11 +77,14 @@
     width: 250px;
 }
 

-
Inner Containers

+
+
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 */
+    /* The box-shadow is added here now */
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     height: 94%;
     left: 3%;
@@ -106,13 +93,17 @@
     z-index: -1;
 }
 

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

-

-
But wait - there's more!

+
+
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 */
+    /* Styles to make it less ugly */
     background: white;
     border-radius: 10px;
     border: 1px solid #eee;
@@ -133,10 +124,8 @@
     z-index: -1;
 }
 

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

-

-    
-