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.
Text Here
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
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.
#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
#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
z-index:-1;
After
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








