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

5 comments:

  1. Hi Myri,

    eine Transition musst du mit Vendor-Präfixen schreiben, damit sie in allen Browsern funktioniert. Mit den Präfix -moz- funktioniert die Animation nur in Mozilla Browser, sprich dem FF.

    Das zweite ist, es gibt für Transition eine Kurzschreibweise, mit der tust du dich auf Dauer leichter. Mit allen Präfixen und Kurschreibweise sähe das so aus:

    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;


    Das funktioniert dann in allen aktuellen Browser, im IE aber erst ab Version 10.

    Gruß Oliver

    ReplyDelete
  2. Danke Oliver =)
    Das besser ich definitiv noch nach.

    Grüsse
    Myri

    ReplyDelete
  3. :(.......
    bei mir glitzert nix
    mist.
    sicher bin ich zuuuuuu blöd dazu.

    grüßle sendet dir flo.
    aber.........
    deinen blog und die tuts find ich klasse.
    arbeitest du nur mit gimp?

    ReplyDelete
  4. Ja, das ist das Problem mit dem weissen Hintergrund, den ich jetzt neu hab.Da der glitzer auch weiss ist, sieht man ihn nicht mehr. Der Post wird aber sowieso nächstens überarbeitet, auch mit dem Code.

    Freut mich dass dir der Blog gefällt.
    Ich arbeit eigentlich nur mit Gimp, aber momentan geniess ich grad die Photoshop Testversion und mach bisschen was damit (das Blogdesign zum Beispiel) aber sonst ja, eigentlich schon Gimp ^^

    Liebe Grüsse
    Myri

    ReplyDelete
  5. Myri,
    och, das wär klasse, vielleicht versteh ichs ja dann, grinsel.
    jaja, mach mal photoshop, du wirst es lieben ;-) nix geht drüber.
    viel freude damit.
    wenn du bei mir mal schaust, also mit meiner hintergrundfarbe, hm, da müsst es schon dolle glitzern, lach damit es zu sehen wäre.

    grüßle flo

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered