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(opens in a new tab) and comfortable using CSS3 properties like border-radius(opens in a new tab) and transforms(opens in a new tab). And if you want to get fancy with your CSS logo, you can give gradients(opens in a new tab) and box-shadows(opens in a new tab) a try!

Start by coding up the iconic Olympic rings(opens in a new tab):

via Doug Neiner(opens in a new tab)

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(opens in a new tab):

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(opens in a new tab)

Or go old-school with the original Adidas logo(opens in a new tab):

via ecsspert.com(opens in a new tab)

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(opens in a new tab)!) can be built in CSS:

via bchanx(opens in a new tab)

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(opens in a new tab), make a pure CSS animated Twitter Fail Whale(opens in a new tab)!

via Subcide(opens in a new tab)

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.