Webentwicklung||flexibel + nachhaltig ...
Content Management||Wordpress, Joomla, Drupal
Design||modern und individuell
Service / Support||für Ihr gesundes Web!
Busines Partner||unser Angebot an Agenturen
Retina Ready||mobile Bilder + Grafiken
Mobile First||Standards + Framework
Mobile Starter||Ihr mobiles Web
User Experience||Click or Touch?
Strategien||Web-App - Responsive - Adaptive
Web-Paper Plugin||Text mobilisieren
Web-Planer||Erfolg durch Planung
WebTec||Html, CSS, ...
Attraktive Links mit CSS3 Animation
HTML Element animiert rotieren mit transform:rotate
ich bin ein Link!
Auf unserer Seite verwenden wir diese Technik um auf Links aufmerksam zu machen: in der Desktop Version löst das hover event die Rotation des Pseudo Element :before aus, auf mobilen Geräten läuft die Animation nach dem touch event während das Linkziel geöffnet wird.
Damit es für den Texter möglichst einfach und ein konsistentes Layout gewährleistet bleibt, werden die CSS Eigenschaften nicht über eine extra Klasse zugewiesen.
Jedem Link innerhalb einer Überschrift wird ein leeres Pseudeo-Element vorangestellt:
CSS
h1 a:before {
content: "";
display:inline-block;width:1rem;height:1rem;background: url(../images/icons/gologo13bo.png);background-size:cover;-webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;transition: 1s ease-in-out;}
Damit die Darstellung auch auf Retina Displays optimal ist, wird das Background-Image in doppelter Größe als angegeben angelegt und per background-size:cover skaliert.
Die Animation:
{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg);}
Pseudo x 2
mit der doppelten Pseudo Syntax wird bei :hover des Links die Animation des :before Elements ausgelöst. Ohne weitere Angaben wird das Element um seinen Mittelpunkt rotiert - was hier gewünscht ist.
Mit dem CSS3 Attribut transform-origin kann aber auch ein alternativer Pivotpunkt festgelegt werden.