Dan Cole hat einen interessanten Artikel über die Erstellung eines Logos nur mit CSS. Warum?
- Schnellere Ladezeit
- Funktioniert auch bei deaktivierten Bildern
- Skalierbar
Hier ist, wie es aussieht

Hier ist, wie es gemacht wurde
#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;
}
Tolle Info! Das wäre nicht für alle Schriftarten verfügbar, aber es ist etwas, das man sich ansehen sollte.
Danke!
Netter Trick, aber nicht funktional, wenn das Logo gedruckt werden soll.
Ich starte gerade meine erste Seite als freiberuflicher Motion-Graphics- und Filmkünstler. Bin beim Suchen nach Inspiration auf diese Idee bei Google gestoßen.
Ich würde sagen, es macht mehr Sinn, das zu verwenden, womit man am vertrautesten ist, aber das ist ziemlich inspirierend.
Die Erstellung von Logos mit CSS ist eine coole Idee, sie hat ihre Grenzen, wenn man von 100% CSS spricht, aber wenn man einfach etwas sehr Einfaches möchte und weiß, wie man programmiert, dann nur zu.
Ich würde gerne mehr reine CSS-Logos sehen.