student web hosting

Amazing CSS3 Box Shadow Examples

I’ve been wanting to improve a bit on my original css3 box shadow effect I wrote about over on my personal blog for a while now. It’s been nearly two years since I had that “ah-hah” moment of creating the clever box shadows. Many individuals have taken inspiration from the original idea and spun it into some amazingly wonderful things.

Before I bore you readers who just want the copy/paste goodies, here is a screenshot of what we’ll be creating.  Here is the working demo for those who want to see it in action. (You must have Chrome or Safari to view this, as I didn’t go to the trouble to add -ms and -mozilla browser prefixes.  As this is just an example of some things that are possible, I’m sure you can properly pre-fix and make production ready your own code.

finished-css-box-shadows-thumb

If you’ve never worked with the box shadow property, let me quickly introduce you to it.  The css3 box shadow property has 6 values, which goes like this:

Throughout this tutorial I’ll be mentioning some other css3 properties which enable many of the fancy effects you’ll see below.  Namely:

  • CSS3 Gradients
  • CSS3 Transforms
  • Z-index
  • Absolute Positioning
  • Psuedo Selectors (:before & :after)

I won’t be going in to any details on these properties, but you’ll quickly learn how they are used to create some of the box shadows.  Here we go.

Step 1: Set up our HTML

The great news here, is that all of the effects below are built on either a single div element, or a div with a nested element.  A maximum of 2 HTML tags are required for each effect!

 

Step 2: Add our basic CSS styling

Here is what our design should look like now

css box shadows step 1

Step 3: Add our first css box shadow!

There is quite a bit going on in this big lump of code.  Let me quickly explain the process of getting to this.

  1. Add our box shadow via :before pseudo selectors and make it blue (I’ve made mine blue simply for illustration purposes)
  2. Give it an absolute position in the bottom right
    css-box-shadow-step2
  3. Add the css3 skew transform propery
    css-box-shadow-step3
  4. Give it a z-index that pushes it behind our ‘box’
  5. Change the color to black
    css-box-shadow-step5
  6. Rinse and repeat using the other :after pseudo selector, skew in the opposite direction, and position in the bottom left like so…

  7.  

    css-box-shadow-step6

Step 4: Add the falloff

That’s it for our #box div.  We’re going to work on #inner next.  Now that we have our shadow nicely tucked behind our element, we want to add an extra degree of realism.  I’m calling this ‘falloff’.  As a shadow gets further from the point of origin where the light strikes an object it fades, and becomes less intense.  We should see this start to happen on the corners of our box, as the shadow denotes that the corers are ‘lifted’ up creating the page curl effect I originally posted about.  In order to accomplish this, we’re going to call upon css3 gradients and some more absolute positioning.  Here is the bit of css code to get the job done, and a couple of photos for the visually inclined.

This bit of code adds a css3 gradient that goes from the same color as the background of the page (which is how this particular falloff trick works, and is a requirement) and fades in transparency at the same time.  Essentially we are going from semi-transparent gray -> completely transparent gray -> semi transparent gray.  Once we’ve created the gradients, we position it in front of our shadows, giving us that lovely falloff effect!  Here are the illustrations:

css-box-shadow-step7

css-box-shadow-step8

Sooo sexy.

Step 5: Add some more gradients to further enhance the ‘curl’

Now that we’ve got our shadow in place, we’ll just add a few refinements relying on our old css friends, gradients and pseudo selectors.  We’ll be creating an angular gradient going from the top left to the bottom right, and another from the top right to the bottom left.  Here’s the code, followed by the illustrations:

This code should create something like this (I’ve switched the background color of the box to black to illustrate the effect)

css-box-shadow-step10

That’s it!  All of the samples in the example file are just variations of these same tools, with some extra tricks and twists!  The CSS3 3D text affect was created with multiple box shadows on one element (which is another handy feature of css3 box shadows!)

Here is the final look, this time with an image in the background as well:

css-box-shadow-step11

 

Like the tutorial?  Have a spin on the code of your own?  Please comment and share the post via the social buttons!

 

 

 

23 Comments

  1. ion
    Jul 07, 2012 @ 02:30:08

    supper learn

    Reply

  2. arcadian
    Aug 03, 2012 @ 01:01:59

    nicely done.

    Reply

  3. rubel
    Aug 12, 2012 @ 19:30:08

    nice

    Reply

  4. Rohit
    Aug 18, 2012 @ 11:10:51

    Really nice tutorial. Loved it.

    Reply

  5. Santosh
    Aug 28, 2012 @ 21:04:37

    This is one of the out standing.. Thanks for sharing a lovely tutorial :)

    Reply

  6. BoMaZeN
    Sep 11, 2012 @ 14:31:54

    Really great tutorial & helpful

    Reply

  7. Victor Borah
    Sep 19, 2012 @ 22:05:08

    Very Pretty, Just no Photoshopping for cool shadows ! Helped me a lot. Thanks a zillion !!

    Reply

  8. kieran
    Sep 27, 2012 @ 02:32:54

    Very nice indeed and ver informative.

    Reply

  9. Alda
    Oct 23, 2012 @ 20:26:17

    It’s a very interesting perspective.
    But be careful, #inner:after should have right positioning, not left :)

    Reply

  10. Trinadh
    Dec 04, 2012 @ 08:02:23

    awesome tutorial…i never felt so easy..thanks man….

    Reply

  11. tom
    Jan 11, 2013 @ 05:07:31

    The only problem with the tutorial is that is doesn’t work!!!

    Reply

  12. Julia
    Feb 15, 2013 @ 01:53:14

    Hi,

    I am using the css drop shadows from

    http://www.paulund.co.uk/playground/demo/css_box_shadow/

    which basically looks like the one that is demonstrated in the above tutorial, but my question problem is trying to center the div that contains the drop shadow. Could someone point me in the right direction as far as what I can do to center in such a way that will be centered in different screen resolutions? I have already tried using margin: 0 auto; in my style sheet for that div, but that wouldn’t work, I have also tried position: relative; left: 10%; to move it over, but it looks off in other resolutions.

    Sorry for long message, awaiting replies!

    Thank you!
    Julia

    Reply

  13. Vijayan
    Mar 09, 2013 @ 18:53:24

    sir its really great……..

    Reply

  14. juncai
    Apr 26, 2013 @ 13:30:04

    very nice~

    Reply

  15. Enzo
    May 02, 2013 @ 03:33:47

    You must replace:
    -webkit-transform: skew(#deg, #deg);

    With:
    transform: rotate(#deg);

    Reply

  16. Eshaq
    May 12, 2013 @ 23:55:07

    How do you add the image in the background?

    Reply

  17. kangfauz
    Jun 01, 2013 @ 04:41:32

    awesome ……

    Reply

  18. akelya
    Oct 24, 2013 @ 00:04:08

    hey charm nice job man, i was really helpful, wi used your css styling to one of my website.

    akelya
    (kvcodes.com).

    Reply

  19. Jan-Philip Gehrcke
    Oct 26, 2013 @ 20:14:03

    You should add display: block to the pseudo elements (before/after) when you are assigning width and height. In my use case this was even required.

    Reply

  20. Tom Durkin
    Nov 19, 2013 @ 20:01:13

    Super nice, thanks!

    Reply

  21. Martin
    Dec 10, 2013 @ 08:46:16

    This site has overlapping divs and shadows to emulate postit pads.
    I’m trying to get the same thing in WPress using text widgets. The z-index stacking falls apart so that a negative top margin will push the lower ‘pad’ under the upper one’s skew shadow, the lower one’s skew shadow is then above the lower ‘pad’.
    Any ideas??

    Reply

  22. Immy
    Dec 15, 2013 @ 01:05:04

    How do you get the gradient fall-off to work on latest firefox, not working for me :(

    Reply

  23. dev chauahn
    Feb 28, 2014 @ 19:40:58

    the stuff I was looking for :D

    Reply

Leave a Reply

*