Thursday, August 11, 2011

Monday, July 25, 2011

Monday, July 18, 2011

Some notes on CSS drop shadows

So I wanted to do some CSS shadow for a project I was working on and it turns out that IE has filters to emulate the CSS3 box-shadow property:

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

This works fine and dandy for the simple cases, but there are a couple of caveats that should be written down since I haven't seen these mentioned anywhere:

  1. The IE shadow gets the box model wrong: it adds the size of the shadow to the width/height of the element to which it's applied. Beware when floating and applying to elastic layouts.
  2. The IE shadow does not necessarily appear around the element. If you have a div w/ a background-image that is smaller than the div itself, the shadow will be applied to the edge of the background image, not around the outline of the element

Wednesday, March 9, 2011

Monday, February 28, 2011

Placekitten

Useful. Kitten image placeholders.

Thursday, January 6, 2011

Tuesday, January 4, 2011