HTML/CSS : Spanky Corners

There is an article over at sitepoint on a rounded corner technique for DIV’s called Spanky Corners. The big upside is that it only requires a single div and the CSS takes care of the rest. Kinda neat and an interesting CSS puzzle if you are into stuff like that. I also liked their technique for generating the the rounded corner gifs. Very clever.

As a side note. This is also another example of why programmers are bad at HTML design. They leave it to the designers for figure out how all the CSS rules and exceptions (quirks) work.

This entry was posted in General. Bookmark the permalink.

2 Responses to HTML/CSS : Spanky Corners

  1. todd says:

    i’ve used this technique previously, and it works like a charm. trouble is, if your site undergoes any color changes, it requires the designer to generate new corners for each new color combination.

    one possible fix for this is to accept aliased (slightly jagged) corners, and use transparent gifs. this allows the designer to change one of the colors at will, while the other color (the background color stays fixed.

    another possibility, and a tool that i’m using currently in a few projects, is a javascript solution called nifty corners cube. it’s pretty straightforward and enormously flexible in terms of color palette changes. as javasscript corners go, it’s pretty lightweight.

  2. dru says:

    Ah, but notice the URLs for the images. They are dynamically created based on the URL! 🙂

Leave a Reply

Your email address will not be published.