Körülbelül egy éve foglalkozom komolyabban webszerkesztéssel, de még mindig nem értem a Javascript nyelvet. Épp egy webdesignt készítettem, mikor az jutott eszembe, hogy mennyire jó lenne egy kis animációval színesebbé, érdekesebbé tenni a sablont! Mivel a HTML és a CSS kódoknál kellett maradjak, nem volt más választásom, kutattam egy kicsit a világhálón és találtam is megoldást, méghozzá nagyon egyszerűt, figyeljétek csak!

Hover effekt

A weboldalon a linkeknek megadunk egy színt, legyen például egy világosabb kék:

a {
color:#64abff;
cursor:pointer;
}

Erre most kell készíteni még egy designt, ami akkor fog megjelenni, mikor a kurzort a link fölé húzzuk.

a:hover {
color:#2f8efe;
}

Ezután már csak egy-egy újabb sort kell beszúrni mindkét helyre, ez pedig a transition-duration tulajdonság, ami azt határozza meg, hogy mennyi idő alatt jelenjen meg az a bizonyos "effektus", ami ebben az esetben a :hover. Ezen a soron belül pedig másodpercben kell megadnunk az időtartamot, ami nálam 1 másodperc lesz. Tehát a végső kód:

a {
color:#64abff;
cursor:pointer;
transition-duration:1s;
}

a:hover {
color:#2f8efe;
transition-duration:1s;
}

A transition-duration tulajdonságot máshol is lehet használni, például gomboknál, szövegdobozoknál, menüknél és képeknél is!

Érdekes dolgokat lehet készíteni CSS-el, ugye? :)