Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Anleitung: wpSEO Logo mit CSS3 nachbauen

Viele werden das kostenpflichtige WordPress-Plugin wpSEO von Sergej Müller kennen, welches in der deutschen Bloggosphäre als beste Erweiterung zur Suchmaschinenoptimierung für Blogs gilt. Durch Sergej’s Twitter-Hinweis auf den Nachbau des Twitter Logos in purem CSS3 und meiner Reaktion „Das ist doch gar nicht so schwierig..“ entstand das Angebot, dass Logo seines bekannten Plugins mit reinem CSS3 nachzustellen.

Was kann man sich unter so einem „Nachbau“ eigentlich vorstellen?
In den Spezifikationen von CSS3 sind etliche neue Befehle dazugekommen, um das Aussehen von Webseiten besser steuern zu können. Einige bekannte Vertreter sind zum Beispiel text-shadow, border-radius oder gradient. Diese drei fanden übrigens auch in meinem Logo-Nachbau Verwendung. Normale Logos werden in der Regel mit professionellen Grafikprogrammen wie Adobe Photoshop erstellt. Das besondere an einem mit CSS3 gebauten Logo ist, dass komplett auf den Einsatz von Grafiken verzichtet wird. Jegliche Form, Farbe und Position der Logo-Elemente wird über CSS-ID’s & -Klassen geregelt.

Das Ergebnis

Als erstes möchte ich euch das Original zeigen, welches ich der wpSEO-Startseite entnommen habe:

Und nun mein Nachbau nur mit CSS3. Es handelt sich in diesem Fall natürlich auch nur um eine Grafik, jedoch um einen Screenshot der eigentlichen HTML-Seite. Hier geht’s direkt zum CSS-Logo.

Der Quellcode

Natürlich möchte ich euch nicht den Quellcode vorenthalten. Wer möchte kann das ganze zu Übungszwecken ja mal nachbasteln, ich denke Sergej wird nichts dagegen haben ;)
Selbstverständlich freue ich mich auch auf Verbesserungsvorschläge & Feedback. Sicher hätte man es an der einen oder anderen Stelle noch sauberer hinbekommen, doch ich bin mit dem Ergebnis recht zufrieden. Zu mal das CSS-Logo in unter einer Stunde entstanden ist.

Das HTML-Grundgerüst

Das HTML-Gerüst ist in diesem Fall sehr simpel und besteht aus mehr Fleißarbeit als wirklich innovativen Tag-Konstellationen. Als erstes spannen wir ein div-Container auf, in den wir das gesamte Logo packen. Dadurch können wir später eben auch den Hintergrundverlauf festlegen und haben einen Ausgangspunkt für die weitere Positionierung der Elemente per CSS.

Dem Container mit der ID „text“ geben wir lediglich das Wort „WPSEO“ mit. Das „SEO“ ist wiederum von einem span-Tag umschweift, da es ja später eine andere Farbe als das „WP“ bekommen wird.

Danach, ab Zeile 4,  folgt der interessanteste Teil des Logos, welcher sich aber auch wieder Fleißarbeit auszeichnet: Die Punkte. Insgesamt sind es beim wpSEO-Logo 36 Stück und diese wollen natürlich alle im HTML-Code ausgezeichnet werden. Dafür habe ich p-Tags verwendet und ihnen jeweils eine Klasse & ID mitgegeben. Eine ID musste sein, da jeder Punkt eine unterschiedliche Positionierung und Farbe hat; die Klasse wiederum macht Sinn, da es nur neun verschiedene Punktgrößen gibt. So muss man später nicht jeder ID eine extra Breite & Höhe zuweisen, sondern kann diese Werte ganz allgemein über die Klassen vergeben.

Die CSS-Formatierung

Wie ihr vielleicht bereits erwartet habt, geschieht ein Großteil der Arbeit natürlich in der CSS-Datei. Ich versuche euch den Aufbau im groben zu erläutern, gehe dabei aber nicht auf Standard-Befehle wie width oder display ein, welche den Lesern meines Blogs bekannt sein dürften.

  • Zeile 1 – 10: Wir spannen den #logo-Container mit fester Höhe & Breite auf und positionieren ihn absolut im Dokument. Das ist z.B. auch wichtig, um die Kind-Elemente später positionieren zu können. Ein „position: realtiv“ würde es hier jedoch auch tun. Das Interessante ist an dieser Stelle wohl der background-Befehl. Diesem geben wir nämlich, für Mozilla- & Webkit-Engine getrennt, einen farblichen Verlauf von #d7d7d7 zu #f5f5f5. Man sieht hier auch deutlich, dass sich die beiden Browserweichen noch deutlich voneinander entscheiden, was ich persönlich sehr ärgerlich finde.
  • Zeile 12-15: Mit @font-face werden sicher schon einige etwas anfangen können. Dadurch ist es möglich, eine externe (auf dem Server liegende) Schriftart in eure Webseite einzubinden. In meinem Beispiel ist es „eurostarregularextended.ttf“, welche danach im CSS-Dokument über den Befehl font-family: „wpseo“ verwendbar ist.
  • Zeile 17-18: In unserem Textcontainer mit dem Inhalt „WPSEO“ kommt die gerade verwendete Font zum Einsatz. Außerdem geben wir dem Text einen leichten Schatten und sorgen auch sonst für korrekte Formatierung & Positionierung – nichts wildes.
  • Zeile 34-41: Hier erfolgen drei unspektakuläre, aber für die Darstellung sehr sehr wichtige, Befehle. Mit den border-radius – Zuordnungen (zwei davon sind wieder Weichen für Mozilla & Webkit) machen wir nämlich aus den p-Tags Kreise. Logisch, denn wenn für alle Ecken ein gebogener Rand definiert wird, bekommt das ehemalige Viereck eine Kreisform.
  • Zeile 44-87: Die oben angesprochenen size-Klassen werden nun definiert. So erhalten die verschiedenen p-Tags eine unterschiedliche Größe.
  • Zeile 89-130: Oh du geliebte Fleißarbeit! Jeder p-Tag bekommt eine feste x- & y-Position relativ zum #logo-Container. Außerdem wird den p’s noch eine Hintergrundfarbe mitgegeben. Auch nichts spektakuläres.

Böse Zungen werden nun behaupten: „Das war doch gar nicht so viel CSS3“. Richtig, die meiste Arbeit an der Umsetzung des wpSEO-Logos in HTML + CSS hätte man wirklich auch mit CSS 2.1 erledigen können. Dennoch wäre man nicht zum gleichen Ergebnis gekommen, vor allem border-radius war bei dieser Aufgabe von essentieller Bedeutung. Außerdem kommt bald meine Umsetzung des Facebook-Logos in HTML & CSS – dort dürft ihr euch dann auf CSS3-Befehle in Masse freuen!

Dieser Artikel wurde am 18.12.2010 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?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.