Bahamas logo using CSS3
April 2, 2010
I 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.
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.
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.
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.
Internet Explorer 8 does not support rounded corners but IE9+, Chrome, Firefox and Safari do!
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 client browsers to do a lot of calculations.
- Live with minor page zooming issues.
Alright, so maybe it isn't always the best choice but it's a unique one nonetheless. :)