Over a million developers have joined DZone.

Famous Logos in Pure CSS3

DZone's Guide to

Famous Logos in Pure CSS3

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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).

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}