Web Design Articles

Fun with a pure CSS logo

By Adrian Stein

I couldn't resist myself with the new Sunshine Coast Digital Association logo and decided to have a crack at converting it into pure CSS. As a web developer it's sometimes fun to experiment, and I needed a little technical task to give me a challenge on a Friday afternoon. The logo lends itself perfectly to CSS composition, with its letters comprised of coloured blocks and a web-safe font to boot.

After I was happy with the initial result, I wrote a custom PHP function to easily render the logo components on any page. I then decided to take it one step further, extending the function for scalability, to allow rendering of the logo at any size. This addition required a little bastardisation of the original "pure CSS" idea to make the font size play nice - but I'm still quite pleased with the result. No images are required at all, and the logo is 100% clear and crisp at any size.

After finishing up the logo (complete with scalability) I thought it would be cool to use some jQuery animation effects to do something different with the coloured blocks - making them stack in a staggered pattern as the page is loaded, and fly off the page with each mouse hover event. Perhaps a little too gimmicky, but still lots of fun to push the envelope and see what can be achieved with everything rendered in the browser. 

See the pure CSS logo here