bei Hover, langsam er Farbwechsel

[Julia]

Ich habe mein Menü auf der rechten Seite, bei Hover wechselt die Farbe. Soweit soschön, jetzt würde ich gerne das die Farbe nicht auf anhieb wechselt, sondern von oben nach unten läuft. So das man einen schönen (Spiel)effekt hat. Hat jemand eine Idee wie man da vorgehen kann?

Julia

[Gunnar Bittersmann]

@@Julia:

nuqneH

Soweit soschön, jetzt würde ich gerne das die Farbe nicht auf anhieb wechselt, sondern von oben nach unten läuft. […] Hat jemand eine Idee wie man da vorgehen kann?

Mit Gradienten (Mozilla, Webkits, Vergleich) und Transitions. [CSS3-TRANSITIONS]

Ansonsten mit JavaScript.

Qapla'

[dave]

Hi,

Mit Gradienten (Mozilla, Webkits, Vergleich) und Transitions. [CSS3-TRANSITIONS]

als ich diese Frage gelesen habe war das auch mein erster Gedanke. Ein Test im Chrome funktionierte bei mir allerdings nicht.

Leider habe ich den Source nicht mehr, bist du dir sicher dass das geht?

~dave

[waendu]

Habe genau das selbe Problem - hat jemand eine Lösung?

Andreas Wyss / Architektur / Fotografie

[Gunnar Bittersmann]

@@dave:

nuqneH

Ein Test im Chrome funktionierte bei mir allerdings nicht. […] bist du dir sicher dass das geht?

Nö.

a  
{  
	display: block;  
	position: relative;  
	overflow: hidden;  
}  
  
a::after  
{  
	background: -webkit-gradient(linear, center top, center bottom, from(red), color-stop(25%,red), color-stop(75%,blue), to(blue));  
	content: "\A0";  
	display: block;  
	height: 100px;  
	position: absolute;  
	top: 0;  
	-webkit-transition-duration: 1s;  
	width: 100%;  
	z-index: -1;  
}  
  
a:hover::after  
{  
	top: -80px;  
}

wechselt zwar die Farbe, aber nicht langsam. Fehler im Chrome?

Qapla'