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
Factory Joe 