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, ...
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:
h1 a:hover:before
{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg);}
{-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.