FactoryCity

So 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;
      margin:0;
      padding:0;
      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: css, dropshadow, css3