Animierte Symbole und Icons mit SVG und CSS

Transformicons
Kommentare

Symbole und Icons finden sich an vielen verschiedenen Stellen auf fast jeder Website. Gerade in der Navigation der Website spielen sie oft eine wichtige Rolle für die Interaktion des Users mit der Seite und lassen sich mithilfe von animierten Symbolen und Icons, sogenannten Transformicons, leicht ansehnlich gestalten.

Transformicons machen sich eine Kombination aus SVG, CSS und HTML zu Nutze, um Symbole und Icons auf einer Website zu animieren, etwa in der Navigation. So können Menüs von ihrer Ausgangsposition in ein anderes Symbol – etwa ein „X“, Minus oder in verschiedene Richtungen weisende Pfeile – umgewandelt werden. Auch E-Mail- und Video-Symbole lassen sich so beispielsweise mit einer Animation versehen.

Transformicons werden bereits von zahlreichen Browsern unterstützt; neben Chrome, Firefox, Safari und Opera bieten auch der Internet Explorer ab Version 10 sowie iOS, Android und Chrome für Android Support für die animierten Icons.

Auf der Transformicons-Projekt-Website finden sich nicht nur weitere Informationen in der Dokumentation, sondern auch eine Live-Demo sowie die Möglichkeit, mithilfe eines Builders die Icons an die eigenen Bedürfnisse anzupassen.

Aufmacherbild: Signing and pavement-marking / photography of road markings and traffic symbol on surface road von Shutterstock / Urheberrecht: R.Iegosyn

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -