Schlagwörterarchiv: Hover

CSS3-Tricks: 3D-Flip Hover Animation für Serviceboxen

CSS3-Tricks: Coole 3D-Animationen mit Hover-Effekt erstellen

the-cube-service-box

Auf der Webseite von Code My UI habe ich eine interessante Anleitung zur Erstellung von CSS3-Animationen mit tollen Hover-Effekten gefunden.

Die 3D-Flip-Animation können Sie sehr gut auf einem Privat-Portfolio oder auf einer Service-Webseite verwenden, wo Sie mit mehreren Boxen verschiedene Dienstleistungen anbieten können.

Wenn Sie mit der Maus über die 4 verschiedenfarbigen Boxen fahren, rotieren diese mit einem 3D-Flip und zeigen – die zuerst versteckten – zusätzlichen Infos zu Ihren angebotenen Diensten. Entworfen hat das coole Projekt Rahul Dhiman, auf CodePen.io können Sie sein Projekt live bearbeiten und die Hover-Effekte je nach Lust und Laune bearbeiten.

Weiterlesen

3 einfache und coole CSS3 Hover-Effekte für Grafiken

Wie Sie mit CSS3 interessante Mouse-Over-Effekte für Grafiken erstellen

3 cool CSS3 image hover effects

Bei den heutigen modernen Webseiten und Browsern gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu erstellen. Die einfachste und eleganteste sind in der Regel CSS und insbesondere die Ergänzungen, die mit CSS3 kamen.

Heute möchte ich Ihnen zeigen, wie Sie mit dem Einsatz von Hover (:hover) und Übergängen (transitions) richtig schöne und coole CSS3-Effekte zum Ein- und Ausblenden von Bildern und Bildunterschriften erstellen können.

Weiterlesen

Wie Sie mit CSS3 animierte Tooltipps erstellen

Animierte Tooltipps mit CSS3-Übergängen und Pseudoklassen erstellen

Demo1

Im heutigen Artikel zeige ich Ihnen, wie Sie mit CSS3 einfache und animierte Tooltipps mit CSS-Übergängen und den Pseudo-Klassen :before und: after erstellen können.

Die Idee dahinter ist eine ungeordnete Liste mit Links (Social Icons als Grafik), welche beim Drüberfahren mit der Maus (CSS-Eigenschaft hover) eine kleine Infobox erscheinen lässt.

Tooltipps sind überaus nützliche kleine Hilfestellungen in Form von kleinen Popup-Fenstern, die beim Hovern eines Elementes erscheinen. Sie enthalten meist Erklärungen zu dem Element (egal ob Text oder grafisch) und erhöhen somit die Benutzerfreundlichkeit.

Weiterlesen

7 coole Menüs mit CSS3 Übergängen (Transitions) und Textschatten

Interessante CSS3-Experimente mit Text-Shadow und Transitions

BlurMenu_Style5

Es gibt so viele tolle Experimente und Dinge, die Sie mit den Eigenschaften und Möglichkeiten, die CSS3 Ihnen bietet, erstellen können. Heute möchte ich Ihnen zeigen, wie Sie mit Hilfe von Textschatten (Text-Shadow) und mit Transitions (Übergängen) mit sogenannten Unschärfe-Effekten in 7 verschiedenen CSS3-Menüs experimentieren können.

Die Grundidee, welche dahintersteckt, ist eigentlich ganz einfach. Wenn Sie mit der Maus über einen einzelnen Menüpunkt fahren, kommt dabei die CSS-Eigenschaft [hover] zum Einsatz. Dieses einzelne Menüelement erscheint dabei scharf, die restlichen Menüpunkte bleiben im Hintergrund und erscheinen als verwischt oder unscharf.

Den Originalartikel von der Webseite Tympanus.net/Codrops finden Sie hier: Blur Menu with CSS3 Transitions

Wichtig für Browserverwendung und Mobilversionen!

Die folgenden 7 tollen CSS3-Menüs mit Hover-Effekten und Verwendung von Tranistions und Textschatten funktionieren nur in den gängigsten und modernsten Browsern. In den Mobilversionen (Smartphone, Tablets) werden die Mouse-Over-Effekte teilweise fehlerhaft bis gar nicht dargestellt.

Weiterlesen