|
So, the current bane of any web developer's existence is rounded corners on graphical elements. Every designer wants them, and from a coding standpoint, they're one of the most difficult tricks to pull off. Option 1, CSS 3: The most elegant solution, is that the third version of the standard styling language CSS, has rounded corners included in the specifications. The problem is that it's not yet widely supported. Only a handful of web browsers include the functionality, and of those, most do not handle it well. From a coding standpoint, this method is the easiest, and has the most flexibility, but alas, it is not yet to be. Option 2, placing blockout images: A relatively simple solution is what I employed on this site. Using images to mask the corners of the container. There are a few drawbacks to this solution. First, you are dependent on image transparency. PNG has great blended transparency support, but it isn't supported in IE 6 without a lot of hacks. Second, if you have anything other than a solid color as the background behind the rounded object, it will be an absolute nightmare to get the rounded corner images to match. Not impossible, but rules out a lot of options for flexible object sizes or complex backgrounds. Third, it requires adding extra elements in the code for each of the corner images, and then floating those images above the object to make it seem rounded. Effective, but messy. The biggest benefit of this method is that it doesn't matter what is in the rounded object. Option 3, using javascript: There are a myriad of javascript options out there that essentially draw tiny 1 pixel boxes in the corners to create rounding effects. See Nifty Corners, Transcorners, etc. The most obvious downside of these methods is that it requires javascript to work. The second problem is that invariably these solutions look "jaggedy" as there is no antialiasing to blend the curves. Option 4, using nested objects with background images: If you nest several container objects within each other, you can use different background images in each container object to put rounded images in the corners, giving the appearance of one cohesive object. The upside of this method is you can be very exacting in the look and feel, even giving different corners wildly differing styles. The downside of this method is it requires adding extra container objects to your code. If you are working with a content management system, you may not have the ability to add the extra container objects where you need them. Similarily, just because your CMS does output extra container objects doesn't mean that their structure will match that necessary for the rounding method of your choice. For example, Joomla offers a nesting of 3 extra container objects, which works for this method, but not this one. With Joomla 1.5, it's easier for a template designer to rework how the structure is output, but it's still quite a bit of work to accomplish. So all in all, with a complex site and a lot of different needs, you'll probably find yourself using multiple rounded corner methods. Messy, a pain, but you do what you have to do. So, |
