Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / Themen-Blog2 / t3n-logo-nur-mit-css3.php

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!