summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorbt <bt@web>2023-12-12 13:58:29 -0500
committerIkiWiki <ikiwiki.info>2023-12-12 13:58:29 -0500
commitd630d03c4f8a9b8c2d571dd2872024911ff1d218 (patch)
tree0912de206ab27e88f521996ab153daedfd054bbd
parent6ca5203d0be44404032bd67e3c134e1413fb0947 (diff)
-rw-r--r--posts/better-box-shadows.md51
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)