Pure CSS Logos. No Images, No JS.

A few years ago, creating a logo only with the use of CSS sounded a bit crazy. Now, with CSS3, you can replicate a lot of fancy effects you thought you can do only in Photoshop. The results are just stunning and unbelievably realistic!

We chose to recreate in CSS some of the logos we previously made using “standard” technologies. The whole Design Department was involved, everyone worked on a logo.

The logos are rendered correctly in all the the major browsers, latest versions of course. It’s fun to see how older browsers interpret the CSS code. I used for examples IE 7/8.

Here are the logos, if you want to see how they were done just check out the HTML and CSS markup. Firebug for the win!

 

Zitec

This was very easy to recreate in CSS. Skew property was used, otherwise just simple blocks. (author: Alex Axon)

CSS only logo:

 

Image sample (logo rendered on different browsers):

 

Codepax

Another simple logo to recreate using the skew property from CSS3. (author: Bilen Mujdaba)

CSS only logo:

 

Image sample (logo rendered on different browsers):

 

Zidox

A bit more complicated, a lot of skew, rotate and border-radius. (author: Bogdan Ungureanu)

CSS only logo:

 

Image sample (logo rendered on different browsers):

 

ZAFF

I think this was the toughest one to build. A lot of work, heavy use of border-radius, skew, creative masks and so on. (author: Bogdan Ungureanu)

CSS only logo:

 

Image sample (logo rendered on different browsers):

 

Hotel Peeps

Fairly complicated, but extremely fun to do. Intensive and creative use of border-radius CSS3 property. Nice pixel art (or 8-bit) feel on older browsers. (author: Adrian Limbasan)

CSS only logo:

 

Image sample (logo rendered on different browsers):

 

How did we do it?

To get an idea of how we created these logos please take a look at the image below. You can see all the html elements. By creative use of CSS3 and pixel perfect positioning the results are simply great. If you really want a more detailed look, just inspect the HTML and CSS code with Firebug. And last but not least, thank you ecsspert.com for this idea!

 

by Alex Axon

5 responses to “Pure CSS Logos. No Images, No JS.”

  1. constantine says:

    Ehm… great idea but did you guys get the title and idea from here by any chance: http://www.ecsspert.com/play/css3-logos/ ?

    • Hi Constantine, thanks for the message.
      This is not something new, the idea of CSS only logos it’s been around for a while. We surely didn’t invented this :), there are several designers out there that have done it.

      • Vlad says:

        Hi Alex,

        I’m glad I could inspire you to recreate these nice logos with HTML CSS3. It would have been nice for you to choose an unique title or give credit for it.

        Vlad

      • Radu Barbu says:

        The idea is not new, indeed, but the other guy at least mentioned his inspiration (at the bottom of the page) which is always a fair and nice thing to do since, as you said, you didn’t invent this.

        Btw, great idea for the title, mate! :))

  2. Hi Vlad, Radu, I am sorry for any misunderstanding. Vlad, if you are the one that invented this, I didn’t know that and I am giving you the credit, thanks!

    I wasn’t aware that you used this particular title on your website. A search for “pure css logos” returns a lot of results, so I guess I used this title because people are searching for it.

Leave a Reply

Your email address will not be published. Required fields are marked *