"How'd They Do That?" - Curved Corners

[RayC]

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.

[LBA]

I take it one step further. Rather than make each rectangle the exact size... make your image of the rounded corner box but when you save it, slice it up so you've got a small image for each of the four corners. Then in NOF, just make a 3 row x 3 column table, give it your background color, drop the 4 corner images into the 4 corner cells, and bingo.... put content into the center cell and you've got a fully resizeable and reusable rounded corner rectangle that can be copied and pasted anywhere you need it. (Hint: You may need to uncheck NOF's table option to add non-breaking spaces.)

Laurence

[mia]

I take it one step further. Rather than make each rectangle the exact size... make your image of the rounded corner box but when you save it, slice it up so you've got a small image for each of the four corners. Then in NOF, just make a 3 row x 3 column table, give it your background color, drop the 4 corner images into the 4 corner cells, and bingo.... put content into the center cell and you've got a fully resizeable and reusable rounded corner rectangle that can be copied and pasted anywhere you need it. (Hint: You may need to uncheck NOF's table option to add non-breaking spaces.)

This is a proved way of creating boxes with rounded corners.
I do it like that already since years.
In Photoshop you can create rectangles with rounded corners with a few clicks, give them a small shadow on the right and bottom, looks very cute.

[RayC]

And that's pretty much what EZ-Round will help you to do.

The thing I found interesting about this was how the image around the box was the same colour as the background - kind of a "negative image" if you like. Typically, to create a borderless effect, I would have the border graphic the same colour as the inside of the box. But this allows you to use a single graphic (or if you slice it up for expandability, a single set of graphics) used for different coloured boxes simply by changing the background colour inside the box. Otherwise you'd need to create an image set for each colour.

In the words of Rebecca Black: "Fun. Fun. Fun. Fun."

[LBA]

Indeed, the negative design concept makes it an all purpose solution, regardless of which implementation you use. Very interesting. I'm wondering if there would be an anti-aliasing issue, where your graphic should be disigned using a color that is at least close to the final box interior color... or if it wouldn't matter. Will have to try it and see.

Laurence