Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

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

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. 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!

  2. 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. ;-)

  3. 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…

  4. 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?

  5. 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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.