Bahamas logo using CSS3

I was admiring the simplicity of an Islands of the Bahamas billboard when a thought occured to me. Could it be drawn using CSS rounded corners?

The answer surprisingly, was yes.

Browser Support

CSS3 may still be in draft form but many modern web browsers already support the “border-radius” command used for rounding corners. They do so in slightly different ways though.

For example, FireFox recognizes ”-moz-border-radius” while Chrome and Safari prefer the CSS tag “-webkit-border-radius”.

A more through explanation on these and other minor differences can be found on the excellent CSS3 border-radius property article via Blogging CSS.

Island Building

I found two high quality sources. A Bahamas logo with accurate shapes and a Bahamasair logo with nice vibrant colors.

I rendered these to the size I wanted, desaturated their colors and set them to around 10% transparency. Next I set the body background to this image and proceded with building the individual shape.

Measuring in Photoshop would get me pretty close but I found that it still required a lot of CSS tweaking by a few pixels to get it perfect. The background tracer image really helped in getting everything matched.

Pointy Flares

Simple circles were the easiest, followed by partially pointy circles, hollow circles and then partially pointy hollow shapes.

The real challenge was figuring out how to do the pointy flares for four of the shapes.

To get the angles and curves I needed meant creating very large shapes with long, luxurious curves. We only want a very small piece of that curve though and that means we need to call upon the power of overflow:hidden!

It’s basically a large div viewable only through its smaller containing div. The larger being mostly hidden thanks to its parent’s overflow property.

A flexible window to a larger world allows us to draw some very creative shapes indeed!

*mad scientist cackle*

Finishing up the remaining shapes was just a matter of obsessive tweaking and lots of patience.

Again, the tracer image helped immensely with getting everything just right.

Finished Product

Bahamas logo using CSS3

FireFox and Safari will display perfect, anti-aliased curves. Chrome will attempt to but expect extreme jaggies as it can’t anti-alias yet.

Internet Explorer (8) and Opera (10) don’t support rounded corners yet so enjoy those eye gouging sharp squares.

Epilogue

While it may not have been meant for it, using CSS as a simple drawing tool can be a fun way to learn all about the mysteries of border-radius.

That and the finished page weighs 23k less than an equivalent PNG. All the technique asks is that you make the following minor concessions.

• Donate a few precious hours of your life.
• Force those puny clients to do lots of calculations.
• Makes peace with your maker for scorning Internet Exploder and other browsers.
• Live with minor page zooming issues.

Allright, so maybe it isn’t always the best choice but it’s a unique one nonetheless.