Be KreaTief

[Quick Tip] Hover Definieren *updated* ✤

Hover definieren

EDIT Hab's endlich geschafft. Der QT ist überarbeitet, mit aktuellem Code und sichtbarem Glitzereffekt :) Diesmal wirklich nur ein suuuperkurzer Quick Tip, aber ich dacht ich zeig euch mal, wie ihr den hover eines Links noch bisschen interessanter macht, also nur dass er die Farbe ändert.
Und zwar geht es heut um den
(bitte mal mit der Maus auf das Wörtchen ^^)
Das ganze lässt sich natürlich auch immer adaptieren.


Das ganze geht natürlich wieder über CSS (Gott, ich liebe dieses Zeug xD) und zwar so.

Wollt ihr das ganze allgemein formatieren, also auf alle Links eures Blog verwenden dann fügt ihr den ganzen Code so ein:
.a:hover{
GANZER CODE
}


Wollt ihr das ganze nur auf ausgewählte Codes geht das folgendermassen.
Entweder den Code ebenfalls im Vorlagendesigner, oder aber direkt im Post oder in einem HTML-Gadget, dann aber mit den Style-Tags.

<style type="text/css">
#glitzer a:hover{
GANZER CODE
}
</style>


Okay. Num zum Glitzer-hover.
Zum einen will ich wie gesagt, dass es im HG glitzert, zum anderen solll der Link aber auch langsam einegefärt werden. das funzt folgendermassen:
Zuerst braucht ihr ein Bild von Glitzer (bsp: hier ) und das wählt ihr dann als HG, der Rest ist für das Einfärben.

Dort wo "GANZER CODE" steht, müsst ihr also folgendes eingeben:
background-image:url(LINK);
border-bottom:none;
text-shadow: #000000 1px 1px 2px;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;
color: #ff0050 !important;
text-decoration: none !important;


Anwendung:

<div id="glitzer"> <a href="LINK"> TEXT </a> </div>
edit