Grow your CSS skills. Land your dream job.

Create Your Logo with Pure CSS

Published by Chris Coyier

Dan Cole has an interesting article up about creating a logo using only CSS. Why?

  • Faster loading time
  • Works with images disabled
  • Scalable

Here is what it looks like:
towers.png

Here is how it was done:

#tower1 {
position:absolute;
top:51px;
left:20px;
width:20px;
height: 30px;
background-color: #333;
}
#tower2 {
position:absolute;
top:31px;
left:45px;
width:20px;
height: 50px;
background-color: #33E;
}
#tower3 {
position:absolute;
top:11px;
left:70px;
width:20px;
height: 70px;
background-color: #3A3;
}
#tower4 {
position:absolute;
top:90px;
left:20px;
width:20px;
height: 10px;
background-color: #AAA;
}
#tower5 {
position:absolute;
top:90px;
left:45px;
width:20px;
height: 17px;
background-color: #AAD;
}
#tower6 {
position:absolute;
top:90px;
left:70px;
width:20px;
height: 23px;
background-color: #ADA;
}

Comments

  1. Great Info! This would not be available for all fonts, but is something worth looking into.

    Thanks!

  2. Jeff
    Permalink to comment#

    Nice trick, but its not functional if you want that logo to appears on prints.

  3. Permalink to comment#

    I’m about to launch my first site as a freelancing motion graphics and film artist. Ran into this idea on google while looking for inspiration.

    What I’d say is that it makes more sense to use what you’re most comfortable with but this is pretty inspiring.

    CSS logo creation is a cool idea, it has it’s limits if you are talking about it being 100% CSS but if you just want something super simpe and you know how to code have at it.

    I’d like to see more CSS only logos.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".