Kategorien-Archive: HTML

3 interessante und coole CSS3 Image Hover-Effekte

3 cool and beautiful CSS3 image hover effects

screenshot-3-hover-effects

Auf den modernen Webseiten gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu schaffen. Die einfachsten und elegantesten wurden in der Regel mit CSS realisiert – und insbesondere durch die Ergänzungen, welche mit CSS3 aufkamen.

In den „alten Tagen des Internets“ mussten die Webdesigner (und solche, die sich dafür hielten) JavaScript anwenden, um bestimmte Effekte oder Wirkungen zu erzielen. Dank der ständig wachsenden Unterstützung für CSS3 in allen Browsern ist es nun möglich, die 3 von mir unten weiter angeführten Hover-Effekte recht einfach und rasch einzurichten.

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

4 einfache und geniale CSS Tool Tipps

CSS Tool Tipps mit HTML5-Data-Attribute

1

In meinem heutigen Tutorial möchte ich Ihnen zeigen, wie einfach es ist, ohne viel Aufwand 4 geniale und reine CSS Tooltipps zu erstellen.

Ein Tooltipp ist ein kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten. Es zeigt eine Beschreibung zu einem Element der grafischen Benutzungsoberfläche.
Alternative Namen sind unter Windows Quickinfo (‚schnelle Info‘, ‚Schnellinfo‘) sowie allgemein Mouse over, da der Tooltip erscheint, wenn der Mauszeiger eine kurze Zeit unbewegt über dem entsprechenden Element verweilt (hover, ‚schwebt‘; deutsche Bedeutung in etwa ‚Mausschwebetext‘).

Weiterlesen