Transparent Borders

And then I finally got aware of Transparent custom corners and borders [1] on http://456bereastreet.com. This article is a followup on this one [2] which offers a markup based solution whereas in [1] he gets away with that ... on the surface ... using javascript. But what Roger Johansson puts together in here is just a -- imho -- very bad hack. Honestly, his solution dynamically adds the markup behind your back that is needed, unfortunately, to make it work. Unfortunately, because the CSS specs don't allow multiple background images for one hmtl element. So corners and borders have to be assigned to an element each of its own which have to be there in the first place. In my eyes, adding javascript to work around incomplete specs or browsers failing the once that are there is the wrong way when there's a straight markup solution at hand. Most of the time the markup solution is much simpler as the CSS approach which tends to pile up illogical. So, no, I didn't add the javascript based solution. Nevertheless, that's how things should've been: just add a class to a div and woops: transparent borders and shadows. Sigh.

But the approach in [2] does not work either for IE due to errors using relative positioning. Ok, then let's fall back to good old tables and assign borders and corners to cell elements. Yes, I hear you crying ``Doh, evil tables, bah, bah'', but face reality dudes.

Well, and IE gets the borders as gifs without transparency and modern browsers the pngs whereas ``modern browser'' is defined as ``one that has decent selectors''. Sure I could come up with gifs that emulate transparency by putting in the actual background. Note, however that we will have to multiply that by the number of styles and variations in the NatSkin. If you really love IE and wanna have shadowed borders you have to crank that up yourself.

Right now, the shadowed borers are only assigned to the Kubrick style as the others don't match so well. The transparent border clashes with the MovableType design in some way. But if you'd like to apply them to your favorite style you could do so easily. The borders are defined in BaseShadow.css and can be imported, for example, into SeaGreenThin.css by adding an @import url('BaseShadow.css'); to the file.

What's left: make the shadows switchable in the skin state; code a BoxesNBordersPlugin to have fancy eyecandy anywhere in your TWiki (just a suggestion).