Facebook-Logo nur mit CSS3

Nachdem ich mir vor einigen Wochen schon mal den Spaß gemacht habe, das Logo des berühmten wpSEO-Plugins nur mit HTML und CSS3 nachzubauen, war ich auf der Suche nach einer noch größeren Herausforderung. Was liegt da näher, als das Logo des großen Internet-Gewinners 2010 nachzubauen: Facebook.

Schon nach wenigen Minuten war klar, dass das Facebook-Logo keine leichte Aufgabe würde. Vor allem die große Wölbung in der Mitte und die schrägen Ecken beim „f“ erforderten Kreativität. Gerne möchte ich euch das Logo samt zugehörigen Quelltext präsentieren und zu den wichtigsten Stellen eine Erklärung abgegeben.

Das Ergebnis

Natürlich handelt es sich hierbei nur um einen Screenshot der eigentlichen HTML-Ergebnisseite. Den Beweis habe ich für euch hier hochgeladen. Als Referenzbild verwendete ich das Facebook-Logo von diesem Blog-Beitrag.

Über die Rendering-Qualität des Bildes lässt sich nun wahrlich streiten. Dennoch konnte die HTML+CSS Variante zumindest bei der Dateigröße einen klaren Sieg davon tragen. Die HTML-Datei samt eingebetteten CSS-Code ist nämlich nur 8kb groß, die Grafik dagegen ganze 40kb.

Weitergehende Untersuchungen zu Ladezeiten und Performance habe ich an dieser Stelle unterlassen, weil es nicht Aufgabe der Übung war. Vielleicht möchte sich von euch ja mal jemand dieser Thematik annehmen? Es wäre spannend zu sehen, ob CSS-Logos oder -Bilder in Zukunft eine Alternative zu nativen Grafiken darstellen könnten.

Der HTML-Code

Wie bereits beim wpSEO-Logo ist auch diesmal der HTML-Quelltext das geringste Übel. Schauen wir mal rein:

Kinderkrams. Wir definieren den gesamten Container mit der ID „fb“, anschließend setzen wir zehn weitere p-Tags.

An der Bezeichnung könnt ihr erkennen, dass alleine acht davon nur für die Darstellung des Buchstabens sind. Den Grund dafür habe ich weiter oben schon genannt; nämlich die schrägen Kanten und Rundungen.

Die zwei anderen p’s sind zum einen die große Wölbung im Hintergrund und zum anderen der hellblaue Bereich zum Ende des Facebook-Logos.

Der CSS-Code

Na endlich fängt der Spaß an! Über 150 Zeilen CSS-Code habe ich benötigt, um das Logo in dieser Form darzustellen. Gerne lasse ich mich belehren, falls man etwas besser oder performanter lösen kann.

Nachfolgend möchte ich euch die wichtigsten Stellen im CSS-Code näher erläutern. Falls etwas unverständlich ist, könnt ihr natürlich gerne die Kommentarfunktion unter dem Beitrag nutzen und nachfragen.

• #fb – An dieser Stelle baue ich den Container auf. Er bekommt feste Maße und wird frei im Raum positioniert. Das besondere an der Stelle ist wohl der border-radius von 30px um die Ecken stark abzurunden. Außerdem bekommt der Hintergrund einen linearen Farbverlauf von dunkel- in hellblau. Zugut erletzt geben wir dem ganzen Container noch einen breiten weißen Schlagschatten mit.
• #fb #letterV – Der vertikale lange Bereich des f’s. Keine CSS-Besonderheiten.
• #fb #letterVE – Nochmals der vertikale Strich, allerdings nur der untere Bereich, welcher über dem leicht transparenten Container liegt. Dient nur zur besseren Darstellung der Ränder.
• #fb #letterH – Dies ist der horizontale Bereich in der Mitte des Buchstabens. Ebenfalls keinerlei besondere CSS-Formatierung.
• #fb #letterHE – Die erste Besonderheit: Wir verwenden das CSS3-Attribut border-color mit vier Werten, wobei drei davon eine Transparenz erzwingen. Durch das Zusammenspiel mit der Angabe border-width, bei der wir ebenfalls vier verschiedene Werte definieren, erhalten wir als Ergebnis ein Dreieck. Dieses Dreieck positionieren wir rechts vom Container #letterH.
• #fb #letterVH – Wieder nur ein Hilfskonstrukt. Diesmal werden die von #letterH erstellten schwarzen Ränder überdeckt.
• #fb #letterT – Hier handelt es sich um den oberen horizontalen Balken. Dieser bekommt als Besonderheit die Angabe border-top-left-radius mit dem Wert 50px.  Dadurch bekommt die obere linke Ecke ihre starke Rundung. Bitte beachtet, dass sich die Browserweichen -moz und -webkit bei der Auszeichung in diesem Fall stark unterscheiden.
• #fb #letterTE – Das gleiche Konstrukt wie beim Container #letterHE. Durch das Zusammenspiel von border-color und border-width entsteht wieder ein Dreieck.
• #fb #letterTR – Dieser kleine Container hat mir viel Kreativität abgefordert. Es handelt sich um die Rundung unterhalb des horizontalen oberen Balkens. Im Prinzip handelt es sich um einen transparenten und runden Container. Dieser bekommt links oben einen weißen Rand. Nur so konnte ich den entsprechenden Rundungseffekt erzielen.
• #fb #bgT – Mein Lieblingselement im Logo, das mich ebenfalls viele Nerven gekostet hat. Es handelt sich um einen 1000×1000 Pixel großen Kreis mit einem border-radius von 600 Pixeln. Dieser muss nun nur noch richtig positioniert werden, in unserem Fall bei -840|-345 Pixeln. Den letzten Feinschliff erhält der Kreis durch einen halbtransparenten(!) Verlauf, wodurch er unten heller und oben dunkler wird. Dazu könnt ihr euch die entsprechende CSS background-Eigenschaft mal genauer anschauen.
• #fb #bgB – Nein, nicht das Bundesgesetzbuch, sondern der hellblaue Container im unteren Bereich des Logos. Durch die Eigenschaft opacity:0.5 erhält er seine halbtransparenz, der border-radius sorgt für die runden Ecken. Im Vergleich zu den restlichen Logo-Elementen nichts Besonderes.

Wie gesagt, Fragen zum Logo könnt ihr gerne per Kommentar stellen. Ansonsten freue ich mich auch über allgemeines Feedback ;-)

Dieser Artikel wurde am 15.02.2011 veröffentlicht