diff options
| -rw-r--r-- | posts/better-box-shadows.md | 51 |
1 files changed, 3 insertions, 48 deletions
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) |