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:

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;
}
Great Info! This would not be available for all fonts, but is something worth looking into.
Thanks!
Nice trick, but its not functional if you want that logo to appears on prints.
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.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.