Bahamas logo using CSS3

April 2, 2010

If you like this article you'll probably like Red Alert, 007 and Fair Use too. ^_^

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

The answer surprisingly, was yes.

Browser Support

Updated September 3, 2013

Nowadays, vendor prefixes are no longer needed for border-radius and that means our CSS file for this project is even smaller!

More info on border-radius support.

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 proceeded 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

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*

Making a custom shape in CSS

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 CSS as rendered by FireFox

Bahamas logo using CSS3

Internet Explorer 8 does not support rounded corners but IE9+, Chrome, Firefox and Safari do!

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.

Alright, so maybe it isn't always the best choice but it's a unique one nonetheless. :)