CSS "Verschwinden" - Effekt

JoelK

Stammuser
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:

dafuq

Stammuser
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
 

DerW

Stammuser
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.
 

JoelK

Stammuser
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
 
Oben