Drücke die Tasten ◄ ► für weitere Artikel  

Schicke Hover-Effekte mit CSS3 Transitions

Mit CSS3 ist Vieles möglich, aber Transitions bringen diese Möglichkeiten auf eine neue Ebene. Tympanus.net zeigt uns, wie wir Transitions für beeindruckende und schicke Hover-Effekte nutzen können.

Schicke Hover-Effekte mit CSS3 Transitions

Das Einblenden zusätzlicher Informationen, zum Beispiel in Produktfotos, endet oft in vielen Optimierungsschritten für unterschiedliche Bildformate, -größen etc. und am Ende hat man oft auch keinen wirklich attraktiven Effekt erreicht. Mit Transitions kann man sich diese Arbeit ersparen.

Im Beispiel von Tympanus.net werden die Informationen für die Bildquelle und die zusätzlichen Informationen in einen div gelegt und dann die Effekte über hover im CSS aktiviert.

Beispiele für Transitions

Das Einblenden zusätzlicher Informationen war zwar auch schon vor CSS3 möglich. Aber Transitions machen erst schicke und nutzerfreundliche Übergänge möglich.

Das kann dann zum Beispiel so aussehen:

CSS3 Transitions
CSS3 Transitions

Die Transitions laufen dabei sehr flüssig und selbst bei einer großen Anzahl Bilder sind die Übergänge immer noch stabil. Dadurch werden Transitions auch für große Produktkataloge interessant, da JavaScript an der Verarbeitung einer großen Anzahl von Elementen oft scheitert.

Ein Problem besteht aber nach wie vor: Der Internet Explorer unterstützt Transitions erst ab Version 10.0. Damit können nur auf knapp der Hälfte aller Geräte Transitions angezeigt werden.

Hover-Effekte für Bilder mit CSS3 Transitions: Tympanus.net

Auf Tympanus.net werden uns die verschiedenen Möglichkeiten der CSS3 Transitions für hübsche Hover-Effekte auf Bilder gezeigt. Dabei geht die Palette über das einfach Aufploppen von Informationen bis zum Ausblenden der Bilder mit Dreh-Effekt. Vor allem ist es aber eine Sammlung, die viele Webdesigner inspirieren wird, die Möglichkeiten der Transitions zu nutzen.

Denn die Anwendung von Transitions auf Elemente erfordert nur eine sehr geringe Einarbeitungszeit und erspart eine Menge Arbeit in JavaScript.

Was haltet ihr von Transitions? Unnütze Spielerei oder eine Möglichkeit zur Verbesserung der Nutzerfreundlichkeit ?

Weiterführende Links zum Thema:

42 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
7 Antworten
  1. von abouttheweb am 28.11.2011 (14:09Uhr)

    Sieht ja ganz nett aus. Aber "flüssig" ist was anderes.

  2. von JMK am 28.11.2011 (14:39Uhr)

    Geht superflüssig. und sieht schick aus

  3. von Eller am 28.11.2011 (14:59Uhr)

    schick, aber kann man auffem Tablet leider nicht gebrauchen ;-)

  4. von CSS3: Mit HSL-Farben und Alphakanälen a… am 05.12.2011 (13:04Uhr)

    [...] Schicke Hover-Effekte mit CSS3 Transitions [...]

  5. von Worüber man im vergangenen Jahr noch bl… am 13.05.2012 (21:16Uhr)

    [...] HTML5 und CSS3 sind auf dem Vormarsch. Und mit ihnen viele Tuturials um die neuen Möglichkeiten. http://t3n.de/news/schicke-hover-effekte-css3-transitions-346464/ [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren.... » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen