One of the design features of this site is a box with a pointed arow at one side - at the top right hand side pointing to the current photo. We're used to the building blocks of HTML being rectangular, so anything that deviates from this is never straightforward. When I set about coding it, I wanted it to:
- Be done entirely in CSS - no extra markup or Javascript
- Deal with varying lengths of text (since it is brought in dynamically)
- Increase in size when the user increases their font size
I tried a couple of different solutions, none of which worked nicely across browsers (more accurately they worked fine in Firefox, but IE choked on them). The solution I ended up with is very simple, and takes advantage of the way CSS backgrounds work.
CSS
Here's the image that I've used in the background of the arrow box:
This is anchored to the middle left of the container, so when there is little, small text in there, it is cropped from the top and bottom.
Some simple left padding to the box ensures the text starts AFTER the slopes end. When the font is made bigger, more of the sloping edges are revealed, continuing the illusion. Of course the bigger the slope, the further from the left the text must start, so the left margin in specified in ems, so it increases as the text size does. It took a little trial and error to get the initial positioning correct.
Here's the final CSS rule:
#photoPointer {
background:transparent url(../images/pointer-bground.png) no-repeat scroll left center;
padding:0.2em 10px 0.2em 1.75em;
text-align:right;
}
Getting the image right
You might have noticed that I used a PNG background image. If you have a flat coloured, consistent background you could get away with using a GIF, but because I wanted to have it overlaid over a changing photographic background, a PNG allows me to keep the diagonal edge smooth.
Of course this triggers many (already well documented problems) regarding IE's support of PNG transparency. Here, I took advantage of 8 bit PNGs - a useful trick which means modern browsers see a nice clean edge, but only IE6 users see a slightly pixellated edge. It's a compromise, but I believe much better than trying to implement nasty Javascript hacks to make PNGs display correctly (which in this case, a CSS background with links over the top, would not work anyway).
And of course, the image has to be long and high enough to cope with whatever size of container it's sitting in.
Write a comment