Daily Opportunity

Yesterday at work, I went to an outside office to help a coworker with a project.  The distraction of the walk out into the warm sun and the sickness that was beginning to creep in — the same sickness that has me at home writing this blog post today — made it very difficult for me to find focus once back in my office. While working on a project and not getting very far due to that lack of focus, I decided to turn my attention a little to the side to reawaken my brain. I decided this project needed to have drop shadows on its buttons. The standard ol’ CSS2 that I use all the time at work doesn’t give me drop shadows. In the past, I’ve always used Photoshop or Fireworks to create a graphic with a drop shadow. In this case, however, the button is made like this:

<div id="additionalLinks">
  <ul>
    <li>
      <a href="#">Button Text</a>
    </li>
  </ul>
</div>

I wanted to keep it as text and not make an image. It struck me that CSS3 has a drop shadow functionality. CSS3 is not quite standardized yet and is not necessarily widely supported, but I was willing to give it a shot. Here’s what I came up with. The two images show the button as it loads and in the over state.

And here’s my CSS for the drop shadow:

#additionalLinks ul li {
    -moz-box-shadow:4px 4px 7px #000000;
    -webkit-box-shadow:4px 4px 7px #000000;
}

#additionalLinks ul li:hover {
    -moz-box-shadow:2px 2px 10px #000000;
    -webkit-box-shadow:2px 2px 10px #000000;
}

html>body #additionalLinks {
    margin-right:10px !important;
}

First, you see the selector for the li that’s a child of the ul that’s a child of the #additionalLinks. I simply added the “:hover” pseudoclass for the mouse hovering effect. The shadow gets shorter to somewhat simulate the button being pressed. The “-moz” is for Mozilla’s Gecko engine for Firefox and “-webkit” specifies the WebKit engine used by Apple’s Safari and Google’s Chrome browsers. IE does not support CSS3, so there’s no “-ie” to specify for that browser. Bummer. So, I used the “html>body #additionalLinks” selector to put a margin on the right of the div. Browsers that support this drop shadow see that and bump the text beside the button over 10 pixels to make room for the shadow. IE doesn’t understand that selector or the CSS3 stuff, so it just displays the button without the shadow like it always did.

Well, that’s pretty neat! There are lots of new, cool things we can do with CSS3, but I suppose I could fall into the trap of using the new features for the sake of just using them. The art will be applying them in a way that somehow enhances the user’s experience but will degrade nicely for IE users. I think I hit that mark with my drop shadows on these buttons.