Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Famous Logos in Pure CSS3

DZone's Guide to

Famous Logos in Pure CSS3

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

So a bunch of pure CSS3 logos isn't as much fun as the South Park CSS3 I posted a few weeks ago -- but it's probably closer to real dev projects, and in some ways more complex.

Logos are pieces of design excellence, often huge investments by companies with a strong desire to create and maintain a brand image. The graphic designer has pixel-level control, of course, but a well-designed logo will not include pixel-level details. Rather, the logo should contain relatively little pure graphical data -- partly to make it easier to recognize, even backwards or upside-down; partly to maintain the logo-company association however many products the company produces; and partly, and purely practically, because the logo needs to be reproduced in multiple media (on clothing, for example). For many logos, the key word is: iconic; and iconic images are always graphically simple.

And fortunately for the web, iconic logos are comparatively easy to make. (Mixed image-text logos are pretty easy too, and CSS3 does wonders for typography as well -- but code-wise less complex.)

For example, the Apple logo: 

You can probably imagine how you'd code this in CSS3, but it would take a bit of work.

What about the Windows logo?

You guessed it: skew transform! and rotates, obviously. (But for some reason I like skews better.)

The full collection of logos is worth checking out, and of course codebrowsing (through conveniently placed 'View Code' buttons below each logo..also in CSS3).

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}