Social Media Icons mit CSS Sprites optimiert

Update 12.02.2018

Ich habs aufgegeben. Als ich das Menü in der Arbeit mit IE 11 sah wurde mir übel. Ein Hover-Effekt wie eine Slotmaschine! Trotzdem glaube ich auf dem richtigen Weg gewesen zu sein. Vielleicht ist ja auch nu irgenwo(!) ein Bindestrich zuviel… Aber die Motivation zum Weitermachen ist mir abhanden gekommen.


Eine Sache gleich vorweg: »Wenn ihr nicht hochmotiviert seid, dann tut euch das nicht an!« Ich habe diese Grenze zum Nerd kurzfristig überschritten – natürlich auch gelockt von ein paar Prozenten bei Pingdom.com 😉

Wollt ihr nur die Icons in der Sidebar – ohne Schnickschnack oder Plugin? In diesem Beitrag beschreibe ich meine bisherige Lösung.

Ich belästige euch auch nicht mit Anleitungen. Dafür gibts viel Bessere aber auch Schlechtere – ich weis es, ich war bei allen. Aber das wisst ihr ja selbst, sonst wärt ihr nicht hier beim Anti-Nerd 😎 . Wie immer ist es hilfreich bei den großen Namen wie Dave Shea oder W3schools nachzusehen. Nicht zu vergessen sind auch die guten alten Webkrauts. Kann gut sein, dass euch meine Empfehlungs-Links weiter bringen als mein Code.

Die Ausgangslage

Die Social Icons kommen in ein HTML-Widget in die Sidebar unter WordPress 4.9.3. Das Widget erzeugt selbständig ein <div> herum, also erspar ich mir Code.

Da ich meine coolen Typewriter Icons um neun Euro gekauft habe war Handarbeit angesagt. Mit meiner Grafik-allround-Waffe Patina habe ich meine 6 Icons zu einem Master-Icon zusammenflickt (wirklich erbärmlich). Im späteren Verlauf musste ich eine zweite, idente Reihe Icons dazuflicken um unliebsame Hover-Effekte auszuschalten. Wer auf Hover steht kann die 2. Reihe ja andersfarbig erstellen.

Master Social Icon
Mein allererstes Master-Icon

Angefangen habe ich mit der tollen und verständlichen Anleitung von Patrick Sexton! Technisch funktionierte zwar auf Anhieb aber die Optik… wie Sau!

Günters Social sprites Vers. 0.9

Nach vielen Versuchsreihen mit Html und Css ist es soweit. Das erzeugte Html ist standardkonform und die Grafiken flickern nicht, das Anklicken  klappt tadellos, alles easy. Einziger Wermuthstropfen: Das aktuell angeklickte Icon verschwindet* (nicht mal Gott weis genau wohin!). Anderer Seits seid ihr danach ohnehin weg, also nicht sooo schlimm 😉

Master-Icon Version 1.0
Version 1.0

Der einfache Teil – Das HTML

<a class="kontakt" title="kontakt" href="&hellip;/blog/kontakt">

<a class="facebook" title="facebook" href="https://www.facebook.com/…">

<a class="google" title="Google +" href="https://plus.google.com/…">

<a class="instagram" title="instagram" href="https://www.instagram.com/…">

<a class="rss" title="rss feed" href="…/blog/feed">

<a class="twitter" title="twitter" href="https://twitter.com/…">

Jetzt gehts los –Das CSS

In der nächsten Ausbaustufe werde ich versuchen das alignleft statt im Html hier zu integrieren – macht einen schlanken Code. Anmerkung: Die Sache hat mir keine Ruhe gelassen und habe mein Werk quasi live aktualisiert. Einfach statt alignleft im Html durch ein float: left; in der ersten Zeile CSS ersetzen. Denkste! Jetzt weis ich warum Dave seine Anleitung CSS Sprites: Image Slicing’s Kiss of Death nannte.
Durch den letzten Schritt ist plötzlich alles zusammen- und nach oben gerutscht*. Das musste ich mit margin: 15px 5px 0 0; zurecht rücken (15px Abstand nach oben, 5px nach rechts und 0px nach unten und links).

*) Ich schätze, dass es keine 5 Menschen auf der Welt gibt die alle dieser Mysterien in CSS kennen (im vorhinein!, nachher erklären warum, das können Viele auf noch mehr Arten).

.kontakt, .facebook, .google, .instagram, .rss, .twitter {
display: block; float:left; margin: 15px 5px 0 0;
background:url(/../blog/wp-content/uploads/social-sprite.png) no-repeat
}

.kontakt {background-position: -3px -3px; width: 34px; height: 34px;}

.facebook {background-position: -44px -3px; width: 35px; height: 34px;}

.google {background-position: -85px -3px; width: 33px; height: 34px;}

.instagram {background-position: -124px -4px; width: 33px; height: 35px;}

.rss {background-position: -164px -4px; width: 32px; height: 33px;}

.twitter {background-position: -202px -3px; width: 33px; height: 32px;}

.kontakt:hover {background-position: -2px -45px;}

.facebook:hover {background-position: -43px -45px;}

.google:hover {background-position: -84px -45px;}

.instagram:hover {background-position: -123px -46px;}

.rss:hover {background-position: -163px -46px;}

.twitter:hover {background-position: -201px -45px;}

Jetzt wisst ihr alles was ich über diese Sprites weis. Sicher nicht der eleganteste Code mit Luft nach oben. Aber er funktioniert – zumindest auf meinem Schirm, getestet mit den aktuellen Versionen von Firefox und Chrome (für Mac). Würde mich über eine Erfolgsmeldung eurerseits freuen. Wenn ihr mutig seit auch über eine Support-Anfrage.

—— இ}ڿڰۣ-ڰۣ~— ——