Wie funktionieren denn nun diese CSS-Sprites?

In einem etwas älteren Beitrag habe ich mich des Themas “CSS-Sprites” schon einmal angenommen. Mit der darin beschriebenen Methode hatte ich sämtliche Grafikelemente meines Themes zu einem Sprite zusammengefasst und entsprechend in die style.css meines Themes eingefügt.

Problem war allerdings, dass das Online-Tool SpriteMe die nachträglich eingebauten Social-Media Buttons in der Sidebar nicht erkannte und so ließ ich die Zusammenfassung dieser Bilder erst einmal außen vor.

Mittlerweile enthält mein Blogtheme nicht mehr viele Grafiken, da ich etliche entfernt bzw. manche durch CSS-Attribute ersetzt habe. Aber ich wollte mich trotzdem noch einmal daran versuchen, die Social Media-Buttons per Sprite-Variante in meinem Blog einzubauen.

Bei der Recherche fand ich Michaels wertvollen Hinweis auf einen tollen CSS-Sprite-Generator. Mit SpridePad und ein bisschen Werkelei war es mir nun endlich möglich, die Sidebar-Grafiken zu einem Sprite zusammen zu fassen.

Erstellen eines Sprites

Zuerst habe ich mir die Buttons horizontal und in der gleichen Reihenfolge, wie ich sie in der Sidebar angeordnet habe, auf der Fläche des Generators platziert. Warum dieses? Das macht es beim Einfügen im Theme einfacher, als wären sie vertikal angeordnet. Ich musste in der Vergangenheit per CSS echte Feinarbeit leisten, damit sich die enthaltenen Grafiken nicht überlappen oder gegebenenfalls noch ein Rand der vorangegangen zu sehen ist.

Wie ihr in dem Video seht, werden während des Vorganges in der Seitenleiste bereits die CSS-Werte angezeigt. Wenn ich alle Grafiken auf der Bearbeitungsfläche platziert habe, kann ich aus der oberen Menüleiste des Generators heraus nun eine zip-Datei herunterladen.

Diese enthält einmal das fertige Sprite im png-Format …

… und eine css-Datei mit den entsprechenden Werten für die Platzierung im Theme.

Damit ist doch schon einmal ein guter Grundstein gelegt.

Nun gilt es, beide Vorgaben dem Template hinzuzufügen.

Die CSS-Sprite Grafik

Die Spritegrafik wurde erst einmal per Online-Bild-Tool TinyPNG verkleinert. Die Optimierung macht satte 75 % weniger zu der ursprünglichen Größe aus.

Anschließend habe ich sie per FTP in ein Verzeichnis beispielsweise mit dem Namen “Images” in eines meiner Blogsverzeichnisses hochgeladen.

CSS-Werte der Grafiken bestimmen

Die vorgegebenen Werte füge ich dann der style.css meines Themes “Smoky” hinzu. Aber damit ist nur erst einmal ein grobes CSS-Gerüst gelegt. Denn wo genau ihr die Bilder letztendlich einfügen möchtet, müsst ihr dann doch selber bestimmen. Sollen Sie an gleicher Stelle wie vor der Sprite-Erstellung erscheinen, dürfte es mit den ursprünglichen CSS-Werten funktionieren.

Ich hatte allerdings bisher die Buttons per html als Widget im Blog konfiguriert. Nun wollte ich die html-Werte aber direkt in der Datei für die Sidebar (sidebar.php) setzen. Das war vorher wichtig für mich zu wissen, denn dementsprechend musste ich die “restlichen” CSS-Attribute anpassen.

Als Beispiel zeige ich Euch meine CSS-Einstellungen. Diese sollen natürlich nur als Anhaltspunkt dienen.

.twitter-32x32, .feed-32x32, .facebook-32x32, .google-32x32, .tumblr-32x32{
	background: url("pfad-zu-eurer-sprite-grafik/sprites.png") no-repeat;
	padding-bottom:30px
}
.twitter-32x32{
	background-position: -58px -9px ;
	width: 32px;
	height: 32px;
	float:left;
	margin-left:15px;
	margin-bottom:20px;
	border:0;
	cursor:pointer
	}
.twitter-32x32:hover{opacity: 0.60; 
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=60) /* IE4-7 */
	}
.feed-32x32{
	background-position: -11px -9px ;
	width: 32px;
	height: 32px;
	float:left;
	margin-left:10px;
	margin-bottom:20px;
	border:0;
	cursor:pointer
	}
.feed-32x32:hover{opacity: 0.60; 
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=60) /* IE4-7 */
	}
.facebook-32x32{
	background-position: -109px -9px ;
	width: 32px;
	height: 32px;
	float:left;
	margin-left:15px;
	margin-bottom:20px;
	border:0;
	cursor:pointer
}
.facebook-32x32:hover{opacity: 0.60; 
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=60) /* IE4-7 */
}
.google-32x32{
	background-position: -158px -9px ;
	width: 32px;
	height: 32px;
	float:left;
	margin-left:15px;
	margin-bottom:20px;
	border:0;
	cursor:pointer
}
.google-32x32:hover{opacity: 0.60; 
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=60) /* IE4-7 */
	}
	
.tumblr-32x32{
	background-position: -209px -8px ;
	width: 32px;
	height: 32px;
	float:left;
	margin-left:15px;
	margin-bottom:20px;
	border:0;
	cursor:pointer
}
.tumblr-32x32:hover{opacity: 0.60; 
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=60) /* IE4-7 */
	}

In den Zeilen 1-3 wird die Grafik in Eurem Theme hinterlegt. Die nachfolgenden einzelnen Werte (bei mir beispielsweise der Twitter-, Facebook-Button usw.) werden per CSS-Werte optisch angepasst. Es ist nicht noch einmal erforderlich, für jedes einzelne Bild den Verzeichnispfad der Hintergrundgrafik zu benennen.

Grafiken per html positionieren und Verlinkungen erzeugen

Das war eigentlich die größte Herausforderung für mich. Die verlinkten Grafiken einzufügen war recht schnell und einfach vollzogen. Allerdings sollten diese einerseits mit einem alt– und title-Tag versehen und andererseits valide sein. :-) Der Schlüssel, dieses in der sidebar.php hinzubekommen, war dann letztendlich nur noch ein kleiner “li”-tag. ;-)

So sieht dann letztendlich der Code für die verlinkten Social-Media-Buttons in der Sidebar meinem Blog aus:

<li>
<a class="feed-32x32" href="https://www.sylvis-blog.de/feed" target="_blank" alt="Feed-Abo" title="Abonniere meinen Feed"></a>
<a class="twitter-32x32" href="https://twitter.com/Sylsurium" target="_blank" alt="Twitter" title="Folge mir auf Twitter"></a>
<a class="facebook-32x32" href="http://www.facebook.com/sylvisblog" target="_blank" alt="Facebook Fan-Page" title="Gef&auml;llt Dir Sylvis Blog? Dann klick doch auf &quot;gef&auml;llt mir&quot;"></a>
<a class="google-32x32" href="https://plus.google.com/+Sylvis-blogDe" target="_blank" alt="Sylvis Blog bei Google+" title="Folge mir doch bei Google+"></a>
<a class="tumblr-32x32" href="http://sylsine.tumblr.com/" target="_blank" alt="Tumblr-Blog" title="Geh&ouml;re zu meinen Tumblr-Followern"></a>
</li>

Also wenn man mal ein CSS-Sprite Schritt für Schritt angelegt hat, dann finde ich es eigentlich gar nicht mehr so schwierig – okay, vielleicht etwas zeitaufwändig. Ich hoffe, ich konnte darin eine kleine Hilfestellung bieten. Allerdings nehme ich an, dass in vielen neueren insbesondere Premiumthemes die Grafiken von Haus aus als Sprites angelegt sind.

Edit 29.12.2013

Angeregt durch den Kommentar von hcr habe ich die style.css noch einmal überarbeitet und möchte Euch diese Änderung nicht vorenthalten:

.twitter-32x32,.feed-32x32,.facebook-32x32,.google-32x32,.tumblr-32x32{background:url("http://www.extern.sylvis-blog.de/images/socialmedia/sprites.png") no-repeat;padding-bottom:30px;width:32px;height:32px;float:left;margin-bottom:20px;border:0;cursor:pointer;text-decoration:none}
.twitter-32x32{background-position:-58px -9px;margin-left:15px}
.feed-32x32{background-position:-11px -9px;margin-left:10px}
.facebook-32x32{background-position:-109px -9px;margin-left:15px}
.google-32x32{background-position:-158px -9px;margin-left:15px}
.tumblr-32x32{background-position:-209px -8px;margin-left:15px}
.twitter-32x32:hover,.feed-32x32:hover,.facebook-32x32:hover,.google-32x32:hover,.tumblr-32x32:hover{opacity:0.60;-ms-filter:"alpha(opacity=20)";filter:alpha(opacity=60)}

Die “alt”-Tags der Verlinkungen in der sidebar.php habe ich nach seiner Empfehlung entfernt.