Rounded corners are often a designers’ holy grail. They seem to provide a concrete user experience and a feeling of smoothness in navigation, while they are being selected recently for more and more web 2.0 designs.
Well, I’m not a designer, but need forced me to explore and implement some rounded magic. There exists a lot of available techniques, most of them claiming to be ‘purely css’. But, I finished up disappointed by nearly all of them.
What I actually needed was light, css-powered rounded corners, giving the ability to switch colors easily (aka create customizable by user web pages). Nifty corners arose as a great option, so I gave them a try, however some problems occurred with the javascript calls. For example, you need to put the nifty corners call last, which is not a rather likable feature, and I had some loading errors on my browser.
So, I ended up creating my own technique, which I’m posting here just in case that proves to be helpful for anyone, anytime. I need to declare also that Photoshop is one of few software applications that make me feel really uncomfortable, so I’m putting the guidelines here assuming that you also feel so and have no specific Photoshop skills. Enough, let’s move to the example.
Say you have a div of 600×50 pixels, a header for example, and you need to put some rounded corners on it.
- Create a new Photoshop file, selecting ‘custom’ as preset and ‘transparent’ in background contents. You’ d better here create an image of size 3x or 4x the size of div (to make the final corners to be created smoother)
- Select the rounded rectangle tool, define the radius and create a rectangle of size equal to your image (edges of rectangle to coincide with image’s limits
- Right click on the rectangle and rasterize its layer
- Now, use the magic wand tool to select the rectangle, then right click and ‘select inverse’
- Pick up the paint bucket tool, define as color the site’s original background color and fill the corners (they are already selected by the magic wand)
- After that, select the magic wand tool again and right click on the areas just filled with color to select ‘layer via cut’.
- Then, delete the old layer (layers window, select ‘shape 1’ and right click to delete)
- Finally select ‘save for web and devices’ from the file menu, scale down the image through image size selection box and save it as .png (transparency option ticked, file created is about 4KB in size)
That’s it! Now you have a transparent image to put it as background in your div, while you can define and change on demand the div’s color by css. For example, you could define in your css:
#this_is_my_div { background-image: url(/images/div_background.png); background-position: bottom; background-repeat: no-repeat; background: #abcdef; }
So, you end up creating a ‘wild card image’, of tiny size, no need for buggy javascript and color just defined by your css… Hope to be useful! :)