Treehouse

Cross Browser CSS Box Shadows

By on  

Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we aren't good with graphic creation, however, doesn't mean that our clients wont effects like box shadows.  Once such project recently popped up for me, so I sought a cross browser compatible solution for programmatic box shadows.  Here's my solution.

The CSS

As you can probably imagine, Internet Explorer is the odd duck when it comes to accomplishing CSS box shadows.  The other browsers stick to a more unified syntax:

div.shadow {
	-moz-box-shadow: 3px 3px 4px #444;
	-webkit-box-shadow: 3px 3px 4px #444;
	box-shadow: 3px 3px 4px #444;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}

There are four main pieces to the -box-shadow property: offset-x offset-y, blur-radius, spread-radius, and color.  Internet Explorer's syntax is a bit uglier and less configurable, but allows for CSS-based box shadows nonetheless.  If you specify the inset keyword at the beginning of the box-shadow value, the box shadow will appear inside the element!

Like border-radius, gradients, transformations, and a variety of other relatively new CSS properties, advancements in CSS are helping Photoshop-inept developers like myself to create programmatic art.  I do have to admit that box shadows are nice and can provide a small layer of depth.

ydkjs-1.png

Recent Features

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • Basic AJAX Requests Using MooTools 1.2

    AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time. Step 1: The XHTML Here we define two links...

  • Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. Ryan Kilimnik

    David,
    I tried viewing the demo using ietester for 5.5, 6, and 7. Doesn’t seem to be working. Is the demo set to work in IE?
    Ryan

    • Adding a straight “filter” property will accommodate for those properties.

  2. Daquan Wright

    I’m using the box shadow property on my footer in my first official website theme. :)

    I love the effect of making a box cascade into the background, much more than Photoshop at least. Though I am a user interface designer, so I’m quite comfortable with designing in that tool if need be.

  3. David-
    Thanks for posting your solution. I’ve run into a weird situation with this and I can’t find anyone addressing it. I’ve coded some dropdown menus to have a 10 px border radius only on the bottom left and right corners. The top corners are 90 degrees so they bump up to the main menu nicely. However, the box shadow for the dropdowns has the 10px radius on all four corners. This is not a huge deal as it is barely perceptible behind the dropdown, but you can notice the shadow fading away as the dropdown touches the main nav. I’m curious about why its happening. See example here:
    http://rcs.ringwoodchristian.com/
    Any ideas?

  4. Its cool effect and work.Its also works fine in IE 6.0 I will use this in my future website http://codedunia.in .
    You can see this effect on this website.

  5. Box-Shadow works perfect in all browsers. Thanks for sharing!

  6. Thanks for your help. Just implemented this drop shadow effect on by design blog. Really thankful to you.

  7. ayub

    box-shadow inset not works in safari… why??

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!