Realistic CSS3 Box Shadows
Update: Here is a working demo
Update 2: I wrote a design article on designing box shadows in Photoshop for StudentWebHosting.com. Check that out too.
Update 3: I wrote a brand new tutorial which extends on this idea, and creates some pretty slick shadow effects! Check out the tutorial and demo on my biz website: http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/
Want to learn how to create the sexiest most real looking box shadows using pure CSS? Then I’ve got a trick for you. The standard Box Shadow that you can apply via CSS3 to a box is rather bland. It may look something like this.
Note: If you like this effect, please link to my post, don’t steal! Thanks.
It is nice and all, and a nice leap from having to do shadows with png background images and such, but it doesn’t quite cut it for me. So with a few tricks, and some magic. We’ll be creating this.
It gives the effect that the page is “curling” or lifting off of the page. This effect is achieved with PURE CSS and ONE single <div> tag!
Let’s get started.
The first thing we will need to do is set up our HTML. It is as basic as it gets folks.
Step 1
Simply create the following in your HTML document.
1 2 3 |
<div id="box"> Text Here </div> |
Now that we have our Box in place, we can do the fancy stuff in CSS. We’ll be using CSS gradients, CSS Box Shadows, and CSS Text Shadows, but the actual trick, or effect comes into play with several “experminetal” css features. Namely: -transform [rotate,skew] and the Pseudo selectors :before and :after. We also throw in some z-index, and other goodies, but my particular effect (which I think I am the first to create) uses SKEW to make it all work.
The CSS Stuff
We need to set up our div via CSS with some basic styles. The following code, sets up our box, gives us a gradient background, gives our box an initial shadow, makes our entire page background gray, and centers our box on screen.
NOTE: I’ve only included the -webkit prefixes which will work on Safari, and Chrome. If you’re working in Firefox, please prefix accordingly. If you have no idea what I’m talking about, then you ought to learn about css prefixes first. Also check out Jeffery’s screencast at NETTUTS for a different sort of shadow but uses some of the same principles.
Step 2
1 2 3 4 5 6 7 8 9 10 11 12 |
body{ background-color:#ddd; } #box{ width:300px; height:300px; margin:50px auto; position:relative; background: -webkit-gradient(linear, 0 0, 0 100%, from(#fefbb0), to(#fff955)); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4); } |
Here is what it should look like.
Step 3
Next we need to add the pseudo selector of :before and :after, which are sort of like “layers” of our box. This allows us to create new shadows and rotate and skew those “layers” separate from our original box. Thus allowing for nifty shadows. Here is the CSS.
1 2 3 4 5 6 7 8 9 10 11 12 |
#box:after{ -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7); position:absolute; content:''; background:transparent; bottom:10px; right:9px; width:70%; height:70%; -webkit-transform: rotate(5deg) skew(10deg); } |
This takes advantage of the :after selector. We create another box shadow on our new “layer” make its background transparent, rotate it, and skew it, then use css positioning to move it to the bottom right of our original box.
This is what things should look like.
I am going to leave the shadow in “front” of our box, so you can see how my magic skew comes into play, to create the more realistic shadow.
Step 4
Next we do almost the same thing, except we use the “:before” pseudo selector, and skew our box at a different angle, and make its shadow “WHITE”. This is the important part, to sell the effect.
Here is the CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#box:before{ -webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7); position:absolute; content:''; background:transparent; bottom:46px; right:41px; width:50%; height:50%; -webkit-transform: rotate(20deg) skew(45deg); } |
This is what it should look like. You should now be able to see the “ah-hah” of what i’m getting at.
Step 5
The last thing we do is add the z-index to our before and after selectors to move the shadows behind the box, not in front.
Give your :before selector a z-index of -1, and your :after a z-index of -2;
Before
1 |
z-index:-1; |
After
1 |
z-index:-2; |
The last thing I did was add some CSS to “fancify” the words inside of the box. Specifically I did this:
1 2 3 4 5 6 |
font-family:Arial; font-size:3em; color:#fffb9b; text-align:center; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 1px rgba(0, 0, 0, 0.4); |
And that’s it! This only opens up some of the possibilities of the shadows! By nesting another div or image in our original box we could open up a whole other dimension of fancy shadows and potentially create complex shadows on both sides of the box.
By varying the degree of “blur” in the shadows we can create different levels of depth for sharp or soft shadows. Link to me, as I appreciate the juice.
Andrew
Category: General
Abhinav Sood
November 5, 2010 - 10:37 am
Very clever with the shadows, Andrew! Nice.
FS1
December 12, 2010 - 5:22 am
Why examples are in PNG and not “Live” CSS3 demo?
Gaurav M
December 12, 2010 - 6:19 am
Love it! keep kicking on 😀
T
December 12, 2010 - 7:07 am
@FS1 that way IE users can see it.
thats why all that html5 and css3 stuff is a waste of time – everyone is using IE7 or 8. and that will not change within the next 2-4 years.
nontheless its a nice demo 😉
Mike s.
December 12, 2010 - 7:08 am
Hi!
Very nice effect. I`d like to use it on my website.
Q: Why examples are in PNG ??
Gatis Negribs
December 12, 2010 - 7:08 am
How about browser rupport, like IE ?
viznedvesito
December 12, 2010 - 7:09 am
How is this realistic? I cannot imagine a situation where the shadow would drop like that. Can someone please explain?
Shaun
December 12, 2010 - 7:13 am
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Jambo
December 12, 2010 - 7:35 am
Have to say, although it’s interesting to see that it can be done, I prefer the standard shadows. It adds effect without drawing you attention away from the content too much. Of course, this is just my opinion and I am in favour of simple, clean and elegant design, wheras this would most likely be used on busier (in terms of elements, not traffic) website.
RichMiles
December 12, 2010 - 7:39 am
The white shadow throws this off for me. It looks like a shadow of the outline, instead of the actual postit.
I had a play with this and deleted the #box:before css, and changed the #box:after to;
-webkit-box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
position:absolute;
content:”;
background:transparent;
bottom:10px;
right:9px;
width:70%;
height:70%;
-webkit-transform: rotate(5deg)
skew(10deg);
z-index:-2;
}
Gatis Negribs
December 12, 2010 - 8:40 am
@T
Why We Should Start Using CSS3 and HTML5 Today
http://www.smashingmagazine.com/2010/12/10/why-we-should-start-using-css3-and-html5-today/
MaxiWerkz
December 12, 2010 - 9:11 am
@T
You’re sadly mis-informed. Not everyone is using IE 7 or 8. In fact very FEW people bother to use IE at all these days. The most popular browsers are (and have been for some time now) Firefox and Chrome. Even Opera users outnumber IE users.
CSS3 and HTML5 is not a waste of time. Why? Because it will push the evolution of web creation further. Because it’s about time everyone started using, and supporting, standardised code. Because it doesn’t work in IE. This means fewer and fewer website designers and coders will support IE over the coming years, forcing Microsoft to FINALLY catch up to the standards everyone expects.
Why should the rest of us always be pulled back from progress just cos Microsoft are too lazy to keep up to date with current developments? It’s about time they either seriously update and modernise IE, or totally give up with it already.
Ahmad Alfy
December 12, 2010 - 9:12 am
All those asking for IE : STFU and GTFO
BrianK
December 12, 2010 - 10:20 am
This is a great tutorial Andrew. It’s a very nice way to use the new transform effects. As far as IE, I have to agree with Shaun’s link. Plus, I always figure people browsing via IE don’t care about design anyway, or don’t know better at a minimum.
Either way, very well done.
Rich Wilson
December 12, 2010 - 10:52 am
@MaxiWerkz and @Ahmad Alfy
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Don’t get me wrong, I hate IE as much as anyone, but the simple fact is that if you’re making a website that has to support 10s or 100s of thousands of users from all over the world, you have to support IE.
Granted, this type of eye candy is unlikely to be critical to the functionality of a website, but telling people who ask about IE to ‘STFU’ is just moronic (and ultimately not good for business).
Doug
December 12, 2010 - 11:00 am
@MaxiWerkz
Sorry, my website for IT professionals still shows over 50% using IE (6, 7 and 8 combined). It would be foolish to ignore 50% of a tech crowd.
Victor
December 12, 2010 - 11:12 am
They shadow would be even more realistic if instead of the white you used a colour that was a darker shade of the post it yellow. As light would bounce off that yellow and hit the page, generating a coloured shadow. Having a darkened border for the the shadow is OK, if you want to fake and illusion that the shadow is in large contrast to the backdrop. Although this optical illusion does occur naturally, painters/artists have been know to exaggerate natural effects and render them more obvious.
As it is, the white glow in the middle of the shadow would be hard to replicate in nature.
here is a demo with added curl to the post it and, what I think, is a more realistic shadow: http://victorstan.com/css-effects/post-it-realistic-drop-shadow.html
Here’s a gist for that: https://gist.github.com/738177
Some1Else
December 12, 2010 - 11:37 am
Guys, just revert to no shadow for antique browsers.
Marius Gedminas
December 12, 2010 - 12:50 pm
Typos: “psuedo” -> “pseudo” (twice); “If your working” -> “If you’re working”.
Btully
December 12, 2010 - 1:42 pm
Interesting and clever use of css3 transforms, but in no way is this “realistic” as the title suggests.
The shadow implies that only the borders of the post-it are opaque and that the rest is transparent.
Ballyhoo Blog
December 12, 2010 - 3:13 pm
@FS1 – So everyone can see the effect. I’ll put up a “demo” on a live page with a couple of refinements.
@Mike – Feel free to use it. PNG images so that all can see the tutorial, regardless of browsers.
@Gatis – IE 7 and below are not going to pull this off, bit it’s “progressive enhancement” I suppose. Browsers that don’t support it, won’t see it. Browsers that do, will.
@viznedvesito, @Btully – agreed this isn’t “realistic”, but it is a heck of lot more realistic that the default. If you atcutally study the way a shadow falls from a curling stick it note, there is a light corner. The shadow doesn’t distribute perfectly in one shade of gray across the corner. Hence the trickery here to try and somewhat replicate it.
@Victor – Agreed. Adding a little “curl” helps to sell the effect.
@Marius – Thanks. Fixed.
@Myself – Dang I gotta get updated with nested comments for replying…
helium
December 13, 2010 - 3:17 am
This is actually awesome, when css3 becomes standard in all the browsers its going to be coold to see what people come up with
Lars Gunther
December 13, 2010 - 2:58 pm
Never mind IE and market shares, but how about adding support for Firefox and Opera. They both support CSS 3 selectors, transforms and box shadow.
And Firefox also does gradients, with a syntax that is closer to what probably will become the standard.
Vanna Patierno
May 4, 2011 - 6:15 pm
That is for positive a ought to examine , thanks for sharing this info i truly appreciate and will attempt out on my unique diligences. thanks a bunch.
Ricardo
January 23, 2012 - 6:17 am
Hi folks!
I applied the -moz-box-shadow but
I’ve been facing a problem with the z-index in FIREFOX.
Could anyone help me?
thanks
Best Video Complete
February 7, 2013 - 4:54 am
Wow, amazing info, thanks very much…
Firdausi Firmansyah
December 9, 2013 - 7:11 am
Impressive, very impressive..Now, on my way to html5+css3! So long 😀