Auf der sehr empfehlenswerten Seite iconshock.com habe ich neue Icons für meinen RSS- und Twitter-Button gefunden, die ich beide im Header-Bereich verankert habe. Auf der Seite gibts es massig kostenlose Icons. Einfach runterscrollen und auf Latest free icon sets klicken. Dort habe ich auch die social media beakers gefunden, die ihr oben rechts seht.
Das nachträgliche Hinzufügen der Hover-Funktion ist recht einfach. Für die nächsten Bildbearbeitungsschritte empfehle ich GIMP:
1. Schritt: Die Breite des 48×48 Icons auf das Doppelte erweitern (Leinwandgröße verändern).
2. Schritt: Die Ebene duplizieren und die Kopie an den rechten Rand verschieben, so dass 2 gleiche Icons zu sehen sind.
3. Schritt: Das kopierte Icon kann nun verändert werden, beispielsweise durch Invertierung der Farben oder einfache Umgestaltungen wie hier durch die Darstellung einer Blasenbildung, und abschließend nur noch abspeichern und hochladen. Beispielhaft am RSS-Icon dargestellt:
4. Schritt: Mittels Anpassung der style.css (div id) und absoluter Position die beiden Icons an die gewünschte Stelle setzen, dabei aber die Breite (width) bei 48px belassen.
5. Schritt: Die Hover-Funktion lässt sich durch “background-position:-48px” realisieren, wodurch das zweite Icon zum Vorschein kommt. Dabei gibt es kein Flackern, denn das Bild wurde ja anfangs schon in den Speicher geladen. Der CSS-Code sieht, am Beispiel des RSS-Icons, folgendermaßen aus:
#rssicon a {
border:1px dashed #555555;
left:50%;
margin-left:335px;
position:absolute;
top:55px;
width:48px;
height:48px;
background:url(img/rss_flask.png) no-repeat;
}
#rssicon a:hover {
background-position:-48px 0;
}
Fehlt nur noch der selbstverständliche Copyright-Eintrag im Footer und fertig. Wo nehmt ihr eure Icons her?
