CSS "Verschwinden" - Effekt

Guten Abend zusammen.


Ich bin zufällig auf diese Demo-Site gelandet: Fictive Company Blog | a blog showcasing the übercoolness of HTML5 & CSS3

Wenn ihr mit der Maus über die Roten Menue-Buttons fährt erscheint ja abgesehen von :hover kein Effekt. Geht nun mal auf "Services" und bewegt eure Maus mal über die Buttons welche unterhalb erscheinen werden.

Ihr könnt erkennen das der :hover-Effekt eines Buttons langsam "ausglüht" oder verschwindet wenn ihr auf den nächsten Button fährt. Gleichzeitig erscheint beim nächsten Button dieser :hover-Effekt. Ich nenne diesen Effekt jetzt einfach mal "glow"

Da ich diese Seite gerade Nachbaue möchte ich diesen Effekt auch auf die anderen (Statischen)-Buttons übernehmen (Home, About, Services, Portfolio, Contact) um die Ansicht der Seite flüssiger zu gestalten.

Wie mache ich dies am besten? Welche Code-Zeilen muss ich aus dem subMenue CSS-Teil in den nav#global CSS-Teil kopieren um den selben Effekt zu erreichen?

Ich danke euch ganz Herzlich. Gruss Joèl


Anmerkung: Auf CSS Code habe ich verzichtet da ihr die unter http://www.onextrapixel.com/examples/html5-css3-website-layout/styles.css selbst findet.
 
Zuletzt bearbeitet:
Dieses "Glühen" ist ein Feature von CSS 3 und nennt sich Transitions. Damit kann man erreichen, dass eine CSS-Eigenschaft beim Ändern (z.B. durch einen Hover-Effekt) nicht sofort den Ziel-Wert annimmt, sondern in einer Art Animation den Zielwert anstrebt.

Dabei gibt man an, welche CSS-Eigenschaft animiert werden soll und wie lange die Animation dauern soll, bis der Ziel-Wert erreicht wird. Im Code deiner Website entspricht das diesem CSS-Abschnitt:

Code:
#services a {
transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}

Anmerkung: Normalerweise gibt man anstatt dem "all" eine CSS-Eigenschaft (wie z.B. "background-color") an, durch die Angabe von "all" wird jede CSS-Eigenschaft, die sich ändert, animiert.
Alles weitere zu Transitions kannst du hier nachlesen: CSS3 Transition

mfg
 
Was du denke ich suchst ist die CSS3-Transition-Eigenschaft: CSS Transitions
In deinem Beispiel sieht es z.B. so aus:

Code:
#services a {
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
Eine komplette Seite zu kopieren kann übrigens eine Urheberrechtsverletzung darstellen, also lieber selbst ein wenig kreativ sein :)

Edit: dafuq war schneller.
 
Ich habe nie gesagt das ich die komplette Seite kopiere, was sollte mir das bringen? Ich versuche Sie lediglich nachzubauen.
Danke für eure Antworten. Gruss
 
Zurück
Oben