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.