First episode in a series entitled "How'd They Do That?"
Whenever I happen upon a site that has an interesting feature, I always wonder "How's They Do That?" I did that just yesterday, and using all my sneaky tools and feminine wiles have figured out how it was done, and how to do it in NOF. So I thought I'd share.
The site is here: http://www.theocf.org/ and the feature is the boxes with the rounded corners. There's a few ways to do this, but what they did was the following:
- Create a box/container/div/single-celled-table, whatever, to hold the content. Set a contrasting background colour - orange, red, yellow.
- Create a graphic with transparency that is the same size as the container above that is the same colour as the page background. The middle part is transparent, and the transparent shape has the rounded corners. I made it blue so you could see it, but on the site, this was pale grey to match the BG of the page.
- Use the graphic as the background image in the container. The BG colour of the container will show through in the middle, and the graphic will blend with the page background to make it appear as if the corners are rounded.
The limitation of this technique is your container must be exactly the same size as the background image. I just thought it was an interesting approach.
Of course, our honoured colleague, Charles, sells a little utility called EZ-Round which uses several graphic images to enclose a table of any size.