t3n-Logo nur mit CSS3
Oh nein – nicht schon wieder: Ich habe erneut versucht, ein bekanntes Logo nur mit HTML und CSS nachzubauen. Diesmal war es das Logo des von mir sehr geschätzten t3n-Magazins. Da die Mädels & Jungs Tag für Tag sehr gute Newsmeldungen zu den Themen Open Source, Mobile, Software, Webentwicklung und vieles mehr raus bringen, habe ich mir Gedacht, gebe ich mal etwas zurück – und zwar in Form eines t3n-CSS3-Logos.
Leute die schon häufiger auf meinem Blog unterwegs waren werden wissen, dass dies allmählich zu einem kleinen Steckenpferd von mir wird. So habe ich bereits das Facebook-Logo und das wpSEO-Logo nur in HTML und CSS3 nachgebaut. Im Vorfeld: Nein ich habe nicht zu viel Zeit und würde solche Aktionen auch nicht als Spielereien abtun. Es ist sehr interessant zu sehen, wie viel Power in der dritten Version der Cascading Style Sheets steckt und wo uns diese Entwicklung noch hinführt. Und zu guter letzt ist es natürlich auch immer ein kleiner Linkbait, aber pssst… ;-)
Das Ergebnis
Selbstverständlich handelt es sich bei dem Logo auf der rechten Seite nur um ein eingebundenes Bild. Jedoch ist es nicht das Original-Logo, sondern ein Screenshot der CSS3-Version. Ihr glaubt mir nicht? Klickt auf das Bild oder alternativ hier.
Mit der Qualität des Logos bin ich diesmal nicht so zufrieden wie mit den zwei bisherigen. Diesmal konnte ich ganz klar feststellen, dass ich an die Grenze meiner Möglichkeiten gestoßen bin. Die Bereiche des Logos in ihren verschiedenen Formen, Farben und Größen pixelgenau umzusetzen stellte sich als extrem schwierige Aufgabe heraus. Zwar hätte ich an der einen oder anderen Stelle noch weiter optimieren können, jedoch bin ich mit dem jetzigen Stand einigermaßen zufrieden.
Das Logo läuft übrigens in den aktuellen Versionen folgender Browser: Google Chrome, Mozilla Firefox, Apple Safari, Opera und Internet Explorer 9. Ältere Versionen des IE kennen nicht die CSS-Eigenschaft border-radius, weshalb eine Umsetzung oder ein Hotfix für diese Browser-Versionen unmöglich ist.
Der HTML-Quellcode
Der liebe HTML-Quellcode fällt bereits wie bei den anderen Logos gering aus. Wer hier großartige Konstrukte oder innovative Techniken erwartet, den muss ich enttäuschen. Ein simples Grundgerüst aus div-Containern mit diversen IDs und Klassen bringt uns an Ziel.
Der CSS-Quellcode
Diesmal möchte ich den CSS-Quellcode unkommentiert zur Verfügung stellen. Es ist Freitag Abend – 19.00 Uhr – der Feierabend winkt. Außerdem ist der Quellcode diesmal dermaßen komplex geworden, dass eine Erklärung den Rahmen sprengen würde.
Man darf gespannt bleiben, wie die Entwicklung in Sachen CSS3 weitergeht!
Dieser Artikel wurde am 04.03.2011 veröffentlicht
Ich habe bisher all deine CSS3 Werke begutachtet. Ich habe von all dem relativ wenig Ahnung und finde es deshalb um so erstaunlicher, wie viel Geduld Du hast, um scheinbar jedes Pixel korrekt auszurichten etc. :) … Wie auch immer, große Klasse und es gefällt mir sehr!
Hallo!
Ich schließe mich eisy im Betreff „Geduld“ an.
Ansonsten super Leistung!
Schönes WE wünsche ich.
Gr
Hey eisy,
freut mich sehr, dass du dich in meinem Blog verewigst :)
Für die reine Umsetzung des Logos habe ich ungefähr 30 Minuten benötigt, so viel Geduld ist also gar nicht nötig.
Auch technisch hast du das ganze schon richtig erfasst: Meistens geht es nur darum, Container Pixel für Pixel zu verschieben – stupide Arbeit…
Interessant wird es, wenn man mit runden Röhren oder CSS-Dreiecken arbeiten muss. ;-)
Also mal wieder .. na einfach herrlich.
Was mir nu aber fehlt.. wie viel Bandbreite kann T3N nun sparen ?
Das fand ich ja nun beim FB Logo schon so genial, wenn die nun ganze 32kb sparen kann das ja in die Millionen gehen.
Vorher ne kurze Abfrage für den Browser um zu sichern das auch auf den alten Mörchen alles korrekt dargestellt wird und bums sorgt der Torben dafür das dieser komische Zuckerhut noch reicher wird…
Ha! wie edel ist das den? Du wirst verfolgt! Huh, ein neuer Stalker ;-)
Grüße
Na das ist ja ne ganze Menge CSS für ein eigentlich so einfaches Logo. Respekt! Den Feierabend hast du dir verdient. :)
Hey Dennis, dein Kommentar ist leider im Spam gelandet – jetzt erst entdeckt, sorry!
Die gesamte HTML-Datei samt eingebetteten CSS-Code ist 9kb groß. Wenn ich bei Google nach t3n-Logo suche, finde ich Bilder von 12kb bis hin zu über 60kb. Wieviel kb in diesem Fall also eingespart werden können, ist von der Qualität des Ausgangsbildes abhängig.
Interessant finde ich persönlich folgende Fragestellung: Wie viel Zeit braucht der Browser um a.) den CSS-Code und b.) das Bild zu rendern?
Habe noch keine Methode gefunden, um das zu Testen. Kennt ihr ein Browser-Plugin oder anderes Tool für die Aufgabe?
Vielen lieben Dank zum Nachbau unseres Logos. Das ist einerseits sinnlos, andererseits schön anzuschauen. ;-)
Wie lange hast du dafür gebraucht?
Hallo David,
die reine Entwicklung hat ca. 30 Minuten in Anspruch genommen ;-)
[…] die Mühe gemacht, den t3n-Rotor allein mit CSS3 nachzubauen – also komplett ohne Grafiken. In seinem Blogpost liefert er auch gleich den Code dazu. Einerseits zeigt das sehr schön, welche Möglichkeiten die neueste CSS-Version bringt. […]
Schick, schick, frage is nur wie sinnvoll ist es Grafiken in HTML+CSS zu beschreiben?? Dafür gibt es SVG(nach belieben auch mit CSS)! Wäre mir viel zu umständlich da DIVs umher zu schieben/zu verbiegen.
Aber trotzdem nett gemacht!
[…] Torben hat unser t3n-Logo in CSS3 nachgebaut. […]