Subtle CSS3 box shadows
Create a sophisticated infobox with subtle CSS3 box shadows.
After reading an article about a page-curling CSS3 box shadow, I was thinking of other ways to make use of the versatile property; this is what I came up with - a sophisticated infobox with shadows that make it pop.
The markup
The markup is ultra-simple: one div wrapper and a header.
The CSS
This is where the magic happens. First we'll give the infobox class some basic styling to make it look good. Note that I've only included webkit prefixes for the CSS3 properties.
.infobox { padding: 2px 10px; border: 1px solid #ccc; color: #1c1c1c; width: 200px; position: relative; margin: 20px auto; background-color: #eef1f1; background-image: -webkit-gradient(linear,0 0, 0 100%, from(#f3f3f3), to(#e2e2e2)); -webkit-border-radius: 2px; -webkit-box-shadow: 1px 0 0 #fff inset, 0 1px 0 #fff inset; }
Now to add the shadows, we'll make use of the :before and :after pseudo classes - this eliminates the need for additional markup. First we make a circle, and then scale it horizontally to stretch it out, and vertically to squash it. Then some absolute positioning and a z-index and we're almost done.
.infobox.shadow:after, .infobox.shadow:before { content: '\00a0'; display: block; width: 100px; height: 100px; position: absolute; z-index: -1; left: 50%; margin-left: -50px; bottom: -41px; -webkit-border-radius: 50px; -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5); -webkit-transform: scaleX(2) scaleY(0.2); } .infobox.shadow:before {bottom: inherit; top: -41px;}
Notice how the shadow is placed in the centre, no matter how wide the infobox is, by using left: 50% and then a negative margin of half its width.
This is what it looks like without a background on the infobox:
And the final product:
Altering the shadow's radius and opacity, or its rotation, you can create some very different effects. See below for some different infoboxes that I created, or check them out in the live demo.
For the vertical shadows, I just inverted the scales to stretch it vertically, and adjusted the other properties to suit. I also had to define a min-height, otherwise you could see the shadow poking out at the top if the box did not have enough content in it.
.infobox.shadowVert {min-height: 210px;} .infobox.shadowVert:after, .infobox.shadowVert:before { content: '\00a0'; display: block; width: 100px; height: 100px; position: absolute; z-index: -1; left: -41px; top: 50%; margin-top: -50px; -webkit-border-radius: 50px; -webkit-box-shadow: 0 0 46px rgba(0,0,0,0.5); -webkit-transform: scaleY(2) scaleX(0.2); } .infobox.shadowVert:after {left: inherit;right: -41px;}
Currently, the shadows only work in Safari and Chrome. I had a go at getting it to work in Firefox, but the shadow was being cut off for some reason that I'm not quite sure of. Click that big blue button below for a live demo of the shadows.
Enjoy the article? Tweet it!
Discussion - No comments yet…6 comments
SICK!
Kenneth Tsang (@jxeeno)
Your live demo has a link to Animated page entry with CSS3, but it should probably lead to this one instead?
Nice effects! Rated the blog post up.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
That's what happens when you copy and paste and then forget to adjust the links :-) Thanks for pointing it out.
BMC Creative | RoaringApps | @brycecammo
I'm using the Internet Explorer 9 beta at the moment and your site renders surprisingly well. I can only find a few (minor!) things wrong with it.
Internet Explorer is now officially pinned to my taskbar again. It's not my default browser though - that's still Chrome for now.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Dude, this is amazing. Thanks so much for posting this out there! Flip, I would have saved myself a couple of hours had I found this blog posting first :)
This doesn't work in Firefox 36.
Post preview:
Close preview