Now that rounded corners for AdSense ad units have arrived, I was curious to see how the corners were being done. There are three general ways to do rounded corners, and each have their drawbacks. The simplest way is to use images for the corners, but then you have to create new images for each color combo you’re using. The more sophisticated approaches use JavaScript and/or CSS, but then you run into problems with inconsistent browser support and/or longer execution times. See the CSS Rounded Corners Roundup for a good listing of the various techniques.
As it turns out, Google is using JavaScript and CSS to create the rounded corners. I pared everything down to the basics and came up with this “simple” example:
You can view the source code here — use the “view source” option on your browser to see it, of course. Most of the magic is in a JavaScript graphics library that Google has created, which is not included in the test file.
The technique they’re using works well for AdSense ad units because the ads are embedded on pages using <iframe> tags (that’s what the JavaScript that Google generates for you eventually does) and are of fixed width and height. This lets them use CSS’ absolute positioning feature to precisely place the borders and everything else. As a general technique it’s probably not something you’d use on your own site, especially for the more fluid (non-fixed) elements of your page layout.
Still, interesting stuff!
Sponsored Link: Want an interesting and mostly unobtrusive ad effect? Try Peel Away Ads. You can see one in the top right corner of the page. Easy installation on any site.
Eric Giguere is the author of Uncommon AdSense and the award-nominated (that just means it lost!) blog Make Easy Money with Google and AdSense.
Trackbacks /
Pingbacks