Jan Quickels // communicate.create.inspire: Interaktive Kommunikation, On- und Offline Publishing

Flexible CSS-Buttons mit Masken

Ich zeige euch eine CSS-Technik, die es ermöglicht Hintergrundfarben von Icons oder Buttons schnell und flexibel anzupassen. Hierfür verwende ich reines CSS in Kombination mit einer Maskierungsebene des Hintergrundes der Icons.

Vor geraumer Zeit habe ich eine Technik entwickelt, die ich euch nun endlich in meinem neuen Blog präsentieren möchte. Mittlerweile gibt es eine Vielzahl an ähnlichen CSS-Techniken, ich denke aber, dass diese flexible Technik für den Einen oder Anderen nützlich sein kann. Also lasst uns starten!

Diese CSS-Methode macht es möglich die Hintergrundfarbe von Buttons oder Icons schnell und simpel zu verändern. Inspiriert vom Handling mit Ebenenmasken in Bildbearbeitungsprogrammen, waren meine ersten Überlegungen, dass es möglich sein muss Masken mit Stücken unseres Markups zu kombinieren.
Um diesen Effekt zu erreichen verwenden wir ausschließlich HTML und CSS in einer Kombination mit einer Grafik–oder bei Bedarf–einer komplexeren Imagematrix.
Für unser Beispiel verwende ich eine kleine Matrix mit drei verschiedenen Icons und einem einfachen Hover-Zustand.

Demo

Diese kurze Demonstration zeigt drei mögliche Kombination, die diese Technik erlaubt:

Fertig? Dann geht es los…

Bevor wir mit dem Markup beginnen muss erst einmal unsere Maske, also die Grafik, erstellt werden. Wenn ihr mehrere Icons/Buttons für eure Website benötigt, könnt ihr natürlich auch eine Matrix mit verschiedenen Icons und Zuständen anlegen. Die Darstellung unten zeigt die vereinfachte Matrix, die in unserem Beispiel verwandt wird:

Jedes Icon hat eine Größe von 18 x 18 px, das Hauptaugenmerk liegt jedoch auf der transparenten Aussparung der Icons. Diese Lücke wird später über unser CSS mit Farbe gefüllt.
Um die richtigen Icons an der richtigen Stelle anzuzeigen, arbeite ich in diesem Fall mit einer kombinierten Matrix, die Grafiken an bestimmten Positionen fixiert und die wir später über das CSS ansteuern und auswählen können. Wenn ihr hierzu weitere Informationen sucht, empfehle ich euch die folgenden hervorragenden Artikel „Navigation Matrix Reloaded” von Dan Rubin und “The XHTML/CSS template phase of my new blog, part 2 The XHTML/CSS template phase of my new blog, part 2” von Veerle Pieters.

Markup

Ein wichtiges Element, dass wir in unserem Sourcecode benutzen ist das , das wir später über unsere CSS-Datei ansprechen und dem die Wunschfarbe zugewiesen wird. Das -Element ist hier sozusagen die Maskierungsebene unseres Icons. Wenn ihr fertig seid und den Code so angelegt habt, sollte es nun folgendermaßen aussehen:

<a href="#" class="btn arrow">Test Button<span></span></a>

CSS

Kommen wir zum letzten Schritt: dem CSS Code. Als Erstes weisen wir unseren Links die Klasse „.btn“ zu. Die relative Positionierung erlaubt es uns, das span-Element entsprechend an den a-Tags auszurichten. Der Z-Index wird auf „10“ gesetzt, das span-Element wird absolut positioniert und bekommt einen Z-Index von 20, so dass unser Icon quasi über dem Link steht. Aufgrund der Transparenz in der Mitte des Icons wirkt unser Icon so als eine Art Maske.
Die Positionierung der Hoverzustände wird ebenfalls sehr gut in Dan Rubins Artikel behandelt.

a.btn {
  position: relative;
  border: 0;
  padding-left: 20px;
  z-index: 10;
}
	
a.btn span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  background: url(/path-to-image/) no-repeat 0 0;	
  z-index: 20;
}
	
a:hover.btn span {
  background-color: #ccc;
}
	
a.arrow span {
  background-position: 0 -36px;
}
	
a:hover.arrow span {
  background-position: -18px -36px;
}

Ich hoffe ich konnte einigen eine gute Lösung für flexiblere CSS-Buttons aufweisen oder Ideen für weitere Techniken liefern. Natürlich freue ich mich über euer Feedback weitere Entwicklungen oder praktische Ergebnisse!