Create Your Logo with Pure CSS
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;
}
Loading ...
1
Great Info! This would not be available for all fonts, but is something worth looking into.
Thanks!
Comment by unTECHy.com — September 5, 2007 @ 12:29 am
2
Nice trick, but its not functional if you want that logo to appears on prints.
Comment by Jeff — November 15, 2007 @ 10:52 am