Transition Color

Transition ist ein beliebtes Styleelement unter HTML5 und CSS3. Älter Browser unterstützen die Funktion leider nicht mehr. Dort wird dann ein einfacher hover-Effekt angezeigt, statt der Transition-Animation.

In diesem Fall möchten wir Transition für die Animation von Textfarbverläufen erklären.

Mit transition:color sprechen wir die Farbe an und können mit der dahinter folgenden Zeitangabe die Effektlänge einstellen. Das dies jedoch funktioniert, müssen wir den Text oder Link mit einem :hover versehen. Erst dann wird der Effekt sichtbar.

CSS3 Code

a{  
  color:#000000;
  text-decoration:none;
}

a:hover{
  color:#ffff00; 
  transition:color 300ms;
}

Beispiel (einfach kopieren und in eure Seite einfügen):

<a href="http://www.sourcecodeblogger.wordpress.com/">Link</a>

Beispiel online

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s