Supah Cheap CSS Dropshadow Hack

Flickr PhotoSo I came up with my very own stupid CSS hack to do dropshadows in Flock (and by reverse extension, Firefox). It’s very much a hack and not one that I would generally recommend unless in very small quantities, but I like it because a) I invented it and b) it works for meª.
So how does it work? Well, it’s fairly simple, actually (and would work even better with a little Javascript-foo).
So take any block level element, something like an h1 or h2, give it a class of “dropshadow” and (ready for the hack?) add a span tag inside the block with a title that is identical to the text of the object. Something like this:

<h1>And another for good measure</h1>

Now here’s the CSS you need (add it to the head of your document:

    .dropshadow {
      color: #fff; 
      position: relative;
      z-index: 1
    .dropshadow span { 
      position: absolute; 
      top: 1px; 
      left: 1px; 
      color: #000; 
      z-index: -1; 
      -moz-opacity: 0.50;
    .dropshadow span:after {content: attr(title);}

It works by taking your original text, positioning it relatively and then elevating it to the Z-index of 1. Then we generate the same text from the title attribute of the span, sets the Z-index to –1 and absolutely positions it snugly beneath the the original text. Give it a –moz-opacity of something between 0.00 and 1.00 and you’ve got a crisp dropshadow! You can of course also change the top and left values to move the dropshadow around.

Technorati Tags: , ,

Author: Chris Messina

Head of West Coast Business Development at Republic. Ever-curious product designer and technologist. Hashtag inventor. Previously: (YC W18), Uber, Google.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: