CSS3: Hintergrundbild animieren – Buttons mit Hintergrundbildern

Geposted am September 14th, 2011 von Whykiki. Abgelegt unter Internet, Webdesign.

Die Überschrift dieses Artikels mag in gewisser Weise ein wenig irreführend sein, denn trotz aller schöner Neuerungen, die uns ein CSS 3 bescheren wird: Hintergrundbilder können nicht wirklich animiert werden. Allerdings kommt es nun darauf an, wie man den Begriff Animation definiert. Denn ein Hintergrundbild in einem DIV kann sehr wohl bewegt werden. Man kann den Container von links nach rechts fahren lassen und somit auch das dazugehörige Hintergrundbild.

Also machen wir es deutlicher: Ein Hintergrundbild in CSS3 kann nicht ein- oder ausgefadet werden:┬á Es gibt keine Ein- und Ausblend-Effekte. Diese müsste man nach wie vor mit JS bzw. jQuery lösen. Auch dazu gibt es später an dieser Stelle ein Beispiel.
Also: Schöne neue Welt mit CSS 3, die uns wirklich jede Menge Features bietet, aber doll animierte Navigationen mit Hintergrundbildern müssen wir uns erst einmal abschminken. Ein Trost: Dafür funktionieren diese Fadings aber bei normaler Hintergrundfarbe und mit den Möglichkeiten von CSS 3 kann man nun ja runde Boxen u.s.w. bauen -> in vielen Fällen kann man so also ggf. sogar auf ein Hintergrundbild verzichten.

Will man aber unbedingt ein Fading haben, dann gibt es eine Möglichkeit sich mit ein paar Krücken zu behelfen. Man kann ein Bild zwar nicht ein oder ausblenden, aber man man kann es verschieben oder eben seine “background-position” ändern, was ja aktuell schon “state-of-the-art” bei den meisten Navigationen ist: Ein Button wird ja in den meisten Fällen aus nur einer einzigen Grafik gebaut, die sowohl den normalen, als auch den Hover-Status beinhaltet (Beispiele dazu im Demo).
Nun nutzen wir dies und erstellen einfach eine Hintergrundgrafik, die den Anschein erweckt als würde sie ein- oder ausfaden.

Gehen wir davon aus, dass wir als Ausgangspunkt einen Button mit einem linearen Verlauf haben. Der soll nun übergefadet werden in einen Verlauf mit einer anderen Farbe. Wir erstellen nun eine Grafik mit dem Button im Normalzustand am oberen Rand der Grafik, der Hover-Status befindet sich am unteren Rand. Um das zu verdeutlich an dieser Stelle mal ein Bild.

Button Beispiel

Wir haben an dieser Stelle nun oben den grün-grauen Verlauf, den Button im Normalzustand. Ganz unten dann den eingefärbten Button und dazwischen erstellen wir nun einen Verlauf. Der beginnt mit derm hellen Farbe des oberen Bereichs (Normal-Status) und geht bis zum dunklen Teil des unteren Buttons (Hover). Die Grafik links sollte das Vorgehen verdeutlichen.

Damit ihr euch das besser vorstellen könnt findet ihr hier eine Demonstration, die Figur 1 ist mit diesem Button umgesetzt worden. Klickt auf den Link und schaut euch das Beispiel an.
Der Trick (wenn man das so nennen kann): Wir verschieben bei Hover die “background-position” von “top center” auf “bottom center”. Die Eigenschaft “background-position” lässt sich mit einer Transition nämlich animieren:
#navigation ul.menu li a:hover{
background-position: bottom center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

oder um es genauer zu machen (siehe Codebeispiel weiter unten): Man kann die Animation / Transition (auf deutsch Übergang) auch aufn eine igenschaft beschränken. Im oberen Codebeispiel wird “all” eingesetzt, d.h. die Transition wirkt sich auf die “background-position” aus, aber auch auf ein “margin” u.s.w.
Im unteren Beispiel setzen wir die Transition nur für die Eigenschaft “background-position” ein. Vergleicht einfach beide Snippets.

#navigation ul.menu li a:hover{
background-position: bottom center;
-webkit-transition: background-position 0.5s ease-in-out;
-moz-transition: background-position 0.5s ease-in-out;
-o-transition: background-position 0.5s ease-in-out;
-ms-transition: background-position 0.5s ease-in-out;
transition: background-position 0.5s ease-in-out;
}

Bitte beachten: CSS3 ist noch so “neu”, dass viele Browser noch Probleme damit haben (die neuen kommen klar, aber nur wenn man ihnen das explizit sagt), daher haben derzeit viele CSS 3 Beschreibungen im Stylesheet noch Zusätze wie “moz” oder “webkit”. Dies wird sich aber in der kommenden Zeit ändern.

Um aber nicht abzuschweifen: Was haben wir nun gemacht? Wir haben ein großes Hintergrundbild erstellt (siehe Beispiel oben) mit einem Verlauf, der beide Buttons bzw. ihre jeweiligen Zustände ineinanderlaufen lässt. Über “background-position” ändern wir die Position beim Hover. Siehe dazu der folgende Code:
<div id="navigation">
<h1>Figur 1: Animierter Button mit background-image: Verlauf</h1>
<ul class="menu">
<li><a href="#" onClick="starting('startseite')">Startseite</a></li>
<li><a href="#" onClick="starting('seitezwei')">Seite Zwei</a></li>
<li><a href="#" onClick="starting('seitedrei')">Seite Drei</a></li>
</ul>
</div>
....
#navigation ul.menu li a{
background-image:url(Button.jpg);
background-repeat:no-repeat;
background-position: top center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#navigation ul.menu li a:hover{
background-position: bottom center;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Das Gute daran: Eigentlich ändert sich für uns sehr wenig, denn jeder der in CSS schon mal einen Hover-Button gebaut hat, wird obige Technik in ihren Grundzügen kennen. Durch CSS 3 bohren wir das Ganze nur noch ein bisschen auf. Wichtig sind dabei allerdings die Hintergrundbilder.
Auf der folgenden Seite habe ich einmal einige Beispiele zusammengestellt, die ihr euch anschauen und auch herunterladen könnt. Diese lassen sich natürlich auch komplett umbauen und deutlich verfeinern. Ihr seht hier nur immer die jeweils einfachste Methode, der Kreativität sind zwar Grenzen gesetzt, aber nur wenige ;-)
Es lassen sich also einige nette Effekte damit umsetzen, wie z.B. die Figur , die an das Rad in einer Slotmachine erinnert.

Ebenso gut: Zwar wird man die dollen Effekte in älteren Browsern nicht sehen können, der Bildwechsel funktioniert aber trotzdem. Nur eben ohne Animationseffekt. Somit bleibt die Funktion der Navigation in ihrer Grundlage erhalten. Toll, oder?

Demo: Animierte Buttons mit Hintergrundbildern (background-image)

Ich würde mich freuen, wenn ihr mir eure Beispiele, Ideen und auch Anregungen dazu via Kommentare zukommen lasst. So kann ich meine Beispiele ggf. auch erweitern.

Buttons mit jQuery

Ist euch diese “Krücke” nicht schön genug, dann gibt es durchaus die Möglichkeit diese Buttons via jQuery umzusetzen. Dazu habe ich folgendes nette Beispiel gefunden:

Animierte Buttons mit jQuery

Eine passende Erklärung findet ihr auf der Webseite des Erstellers Greg J –> Erläuterung Animierte Buttons mit jQuery
Seine Beispiele bauen auf dem “jquery for Designers” von Remy Sharp auf.

Tags: , , , , , , , ,



Trackback URI | Comments RSS

Hinterlasse deine Meinung