I Sashed My Site
Via Martin “proxima centauri” Breton’s weblog, I came across the Jim Thompson’s journal, and what caught my eye was the post Sash Your Site, where you can put up a diagonal striped banner on the top right hand corner of your web page.
I tried it on my site and this is what it looks like now.:
The little sash there is a gif file with a transparent background, and here are the codes in case anyone’s interested:
CSS
.banner {
float:right;
position:absolute;
right:0px;
top:0px;
}
.banner img {
border: 0;
}
HTML
<div class="banner">
<img src="/path/to/sash.gif" usemap="#banner" height="123"
width="150" alt="Site Sash" />
<map name="banner">
<area coords="2, 2, 42, 2, 150, 94, 150, 128, 148, 128, 4, 2"
shape="poly" href="http://chriscurtis.org/"></area>
</map>
</div>
As you can see, it’s all done by smoke, mirrors and image maps.
This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.
I think a PNG might work better, as you wouldn’t have to specify a matte color to acheive an anti-aliased edge, and you could even add areas of selective opacity. Of course, you’d need to hide it from IE, which until Windows Vista, doesn’t use ‘em.
Though I’ve heard that IE 7 will be released before Vista, but who knows what it will or won’t do.
By Derek Jones on July 22, 2005 at 07:16am link