Schlagwörterarchiv: CSS3-Tricks

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

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

CSS3-Tricks: Semi-transparente Buttons erstellen

Wie Sie ganz einfach halbdurchsichtige CSS3-Buttons erstellen können

semi-transparent-buttons

In meinen heutigen Artikel lernen Sie die Erstellung von halbdurchsichtigen (semi-transparenten) CSS3 Buttons kennen, welche ganz besonders auf Webseiten mit fotografischen Hintergrundbildern zur Wirkung kommen.

Webseiten mit ganzseitigen Bildern bzw. Fotos als Background-Image sind derzeit gerade sehr stark im Kommen und ein richtiger Trend. Genau hier kann man die durchsichtigen bzw. halbtransparenten Buttons ganz toll einsetzen.

Weiterlesen