Schlagwörterarchiv: Hover-Effekt

Wie Sie 4 einfache Tooltipps nur mit CSS erstellen

Anleitung zur Erstellung von Pure CSS Tooltipps

Screen

Heute möchte ich Ihnen aus der riesigen Auswahl von coolen CSS-Experimenten eine Anleitung zur Erstellung eines CSS-Tooltips vorstellen und im Anschluss an das Kurz-Tutorial zum Gratis-Download anbieten.

Was sind Tooltipps

Tooltipps sind sogenannte »Quickinfos« oder »Kurzinfos«, welche dem Benutzer mehr Infos geben sollen. Sie werden zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder z.B. Bildern in Computerprogrammen, verwendet und erscheinen, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Das Erstellen eines individuellen, gut aussehenden Tooltipps war oft mit großem Aufwand verbunden und setzte Javascript (meist in Form von jQuery) voraus. Mittlerweile geht dies viel einfacher und schneller nur über CSS. Und das auch noch mit vielen tollen Effekten/Animationen.

Weiterlesen

CSS3-Tricks: Zoom-Ins-Bild Hover-Effekt mit Single-Icons

#002 A simple image zoom hover effect with a single icon

002-Screen

Ich zeige Ihnen hier in meiner neuen Artikelreihe in regelmäßigen Abständen coole, interessante und moderne CSS3-Code-Snippets. Alle Beispiele stammen von LittleSnippets.net, wo sie aber nur angesehen werden können.

Wollen Sie den Code/das Beispiel herunterladen bzw. das Snippet teilen, klicken Sie zuerst auf den codepen.io-button Button!

Sie gelangen dann auf die eigentliche CODEPEN-Beispiel-Seite. Erst hier gibt’s den kompletten Beispiel-Code zum Ansehen, Herunterladen bzw. zum Teilen mit Twitter, Facebook oder Google+. Die Buttons dafür finden Sie ganz rechts unten im jeweiligen Musterbeispiel!

Weiterlesen

CSS3-Tricks: Image-Hover-Effekt mit Icon-Fade-In

#001 – Einfacher Fade-In-Effekt mit Grafik-Hover

demo-screen

Ich zeige Ihnen hier in meiner neuen Artikelreihe in regelmäßigen Abständen coole, interessante und moderne CSS3-Code-Snippets. Alle Beispiele stammen von LittleSnippets.net, wo sie aber nur angesehen werden können.

Wollen Sie den Code/das Beispiel herunterladen bzw. das Snippet teilen, klicken Sie zuerst auf den codepen.io-button Button!

Sie gelangen dann auf die eigentliche CODEPEN-Beispiel-Seite. Erst hier gibt’s den kompletten Beispiel-Code zum Ansehen, Herunterladen bzw. zum Teilen mit Twitter, Facebook oder Google+.

Weiterlesen

Wie Sie ein Flyout-Menü mit CSS3 optisch toll aufpeppen können!

So verleihen Sie einem Menü mit CSS3 die richtige Würze

3 CSS3 Menüs mit tollen Hover-Effekten

In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie Ihre CSS3-Menüs optisch ganz toll gestalten können. Dafür müssen Sie in jeden Menüpunkt eine Grafik oder ein Bild einbinden. Sobald Sie mit der Maus über den Link fahren, erscheint durch den Hover-Effekt Ihre Grafik und das CSS3-Menü entfaltet die volle Wirkung.

Den Originalartikel zu meinen Ausführungen finden Sie auf der Webseite von Tympanus.net/Codrops: How to spice up your menu with css3 Weiterlesen