Hover.css: 50 Hover-Effekte für deine Website
Hover.css stellt dir eine Ansammlung von Hover-Effekten bereit, die du auf unterschiedliche Bereiche deiner Seite anwenden kannst. Heute wird dir die kleine, aber sehr informative CSS-Bibliothek vorgestellt.
Animationen ohne Vendor-Präfix
Bei CSS3 stehen Webdesignern viele Mittel zur Verfügung, um Internetseiten noch spannender zu gestalten. Die besonders interessanten Features sind CSS-Transitions. Sie ermöglichen, dass ein Teil mit einer Animation von einem Stadium in einen anderen gebracht werden kann. Der Support für diese Animation ist in den Browsern jedoch unterschiedlich eingerichtet. Oftmals muss deshalb auf die Vendor-Präfixe (-webkit-transition, -moz-tansition usw.) zurückgegriffen werden.
Für die Verwirklichung der Transitions für Hover-Zustände bietet Hover.css eine einfache Lösung. Die CSS-Bibliothek Hover.css wurde von Ian Lunn entwickelt. Sie stellt verschiedene Animationen bereit, die zur Verwirklichung von ansprechenden Hover-Zuständen von Logos, Buttons, Bildern oder anderen möglichen Elementen deiner Internetseite verwendet werden können.
CSS3 als Basis
Die Anwendung von Hover.css funktioniert sehr einfach. Du kopierst die Klassendefinitionen der gewünschten Effekte in dein eigenes Stylesheet oder bindest das ca. 50 Kilobyte (unkomprimiert und nicht minifiziert) große Stylesheet direkt in deine Webseite ein. Mit den entsprechenden Klassen von Hover.css kannst du dann ohne Probleme die Effekte auf die von dir gewünschten Elemente anwenden. Dir steht eine detaillierte Anleitung für den einfachen Einstieg in Hover.css zur Verfügung.
Hover.css basiert auf CSS3-Funktionen wie Animationen, Transformationen, Transitions und Pseudo-Elementen. Die Bibliothek funktioniert deshalb nur in neueren Browsern. Besonders der Support für den Browser Internet Explorer ist erwartungsgemäß nicht besonders gut. Die CSS-Bibliothek ist auf GitHub und auf der offiziellen Internetseite von Hover.css und verfügbar.
Bounce.js – Ein CSS3-Tool zum Verlieben
CSS3-Animationen sind toll, allerdings können sie auch ziemlich schnell unübersichtlich bei der Programmierung werden. Mit dem Service Bouncejs.com wird dir ein Interface geboten, das du lieben wirst. Warum das so ist, liest du am Besten in diesem Artikel.
Die einfache Bedienung des Interface
Seriöse Entwickler halten meist nichts von Generatoren. Umständliche Bedienung und schlechter CSS-Code sind nur einige Probleme dieser Tools. Nun gibt es, neben den CSS3-Verlauf-Generatoren, auch noch ein weiteres Programm, das dir hier vorgestellt werden soll: Bouncejs.com.
Animationen erstellen
Mit den sogenannten „Components“ kannst du deine Animation selbst Schritt für Schritt aufbauen. Natürlich kannst du auch die fertigen Templates nutzen. Diese können dann auch einfach nach deinen Wünschen abgewandelt werden. Mit einem Klick exportierst du deine Animation als CSS-Code.
Alle Animationsparameter werden praktischerweise in einer URL gespeichert, daher kannst du mit Bounce.js deine Animationen einfach an Freunde und Kollegen weiterleiten. Mit der Zeitlupenfunktion wird die Animation verlangsamt, so kannst du dir die einzelnen „Components“ und deren Auswirkungen live genauer ansehen. Bounce.js ist daher auch sehr gut geeignet, um zu lernen, wie CSS3-Animationen funktionieren. Nach dem Export zu CSS kannst du die Animation einfach weiter bearbeiten. Die Datei liefert dir dafür die Parameter mit. Du kannst die Animation somit jederzeit und sehr bequem über den Online-Service ändern.
Zur Zeit nur als Online-Service verfügbar
Der Name Bounce.js lässt vermuten, dass es sich bei dem Tool um eine JavaScript-Bibliothek handelt. Doch so weit ist es noch nicht – zumindest zur Zeit: Der Entwickler von Bounce.js, Joel Besada, arbeitet zwar regelmäßig an seinem Tool. Vorerst kannst du allerdings nur den Online-Service bouncejs.com verwenden.
