From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2019-01-08-better-box-shadows.md | 124 -------------------------------- 1 file changed, 124 deletions(-) delete mode 100644 _posts/2019-01-08-better-box-shadows.md (limited to '_posts/2019-01-08-better-box-shadows.md') diff --git a/_posts/2019-01-08-better-box-shadows.md b/_posts/2019-01-08-better-box-shadows.md deleted file mode 100644 index 39d5fb5..0000000 --- a/_posts/2019-01-08-better-box-shadows.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -layout: post -title: "Better Box Shadows" -date: 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: - - -
- - - .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; - } - - -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: - - -
-
-
- - -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. - - -Take a look at all the examples in the [CodePen examples](https://codepen.io/bradleytaunt/pen/dyNbZNj) - - -- cgit v1.2.3-54-g00ecf