CSS is a core skill for front end developers and web designers. It stands for cascading style sheets, which is code to tell browsers how to format and style HMTL. CSS can save developers a lot of time and work by providing general style “templates” for how certain types of HTML should appear. For example, rather than going into the HTML and formatting each instance of a headline 20 pt. Arial in blue, you can use CSS to format every instance of that headline in just one step.

But CSS can be used for way more than just simple formatting; it can also be used to create illustrations. Are you looking for a way to exercise your CSS muscles? Why not try to recreate famous logos using only HTML & CSS! We’re not saying this is the most efficient way to add graphics to your site, but if you’re looking for some good practice in refining your CSS skills, this CSS logo challenge will definitely keep you on your toes.

In order to create a CSS logo, you are going to need to be well versed in CSS positioning and comfortable using CSS3 properties like border-radius and transforms. And if you want to get fancy with your CSS logo, you can give gradients and box-shadows a try!

Start by coding up the iconic Olympic rings:

via Doug Neiner

Doug Neiner created this Olympic CSS logo with the border-radius property, which is used often to create rounded boxes, and he uses layering and positioning to achieve the overlapping effect.

Then try your hand at recreating the new Pepsi logo:

This CSS logo was created by using two CSS3 properties: border-radius (which creates the elliptical shapes) and transform (which rotates them to just the right orientation so that they resemble the Pepsi logo). Click on the link below to see how these properties actually looked in a variety of browsers.

via Tangled in Design

Or go old-school with the original Adidas logo:

via ecsspert.com

This CSS logo version of the Adidas logo was also created with the border-radius property, but the designer combined it with the famously underused clip property to create the straight horizontal lines that run across.

See a breakdown of how some famous logos (including Git!) can be built in CSS:

via bchanx

Interested in seeing how all the CSS layers work together to form an image? Scroll over the CSS illustrations on this website and see how they’re built.

And if you want to get really advanced with CSS3 animations, make a pure CSS animated Twitter Fail Whale!

via Subcide

Take a look into the code and you’ll see that this design is pretty complex; each rope has its own rule-set, and the whale alone has about 8 of them! And that’s not counting the animations. CSS animations are still experimental (meaning they won’t work in all browsers), but the concept is cool: transforming objects from one CSS style to another. This design does just that to create the undulating waves, flapping wings, and rising and falling whale.

Did you make your own CSS logo?
We want to see it! Tell us about it in the comments.