About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Fadehover

Dienstag, 25. September 2012

Ich möchte euch erklären, wie man den 'Fadehover' macht. Damit ihr wisst was ich meine, hab ich hier ein filmchen :D, weil ich das mit Worten nicht einfach zu erklären finde. Ich versuche es trotzdem. Wenn ihr mit der Maus auf den Link kommt, dass es dann langsam dahin 'fadet' und auch wieder zurück. Live seht ihr das auf meinem Blog, klick.



Wir haben diesen Code:
-webkit-transition-duration:.4s; -moz-transition-duration:.4s;
diesen könnt ihr von der 's' Anzahl beliebig verändern. Ich finde ihn so am besten.

Jetzt sucht ihr in eurem HTML Teil nach a:link {
und fügt es bei allen dreien ein, damit es wenn man draufgeht fadet, und wenn man wieder runtergeht fadet. (ich erfinde neue geile wörter! xD)


das war's auch schon! ganz schön einfach, ne?

9 Kommentare:

  1. Huhu :D
    Ich hab das gleich gemacht, aber ich sehe keinen Unterschied, obwohl ich alles genau so gemacht habe. Wie fade ich eigentlich die Bilder?

    GLG Lora| www.photoostuff.blogspot.com

    AntwortenLöschen
  2. Hallo ihr Lieben,

    ich finde die Idee von eurem Blog einfach super und er wird bestimmt ganz schnell viele, viele Leser haben. Deswegen bringe ich euch diesen Award vorbei: http://lukanas-blog.blogspot.de/

    LG Lukana

    AntwortenLöschen
  3. hallo :))
    die sidebar bitte rechts :)

    LG
    ronja

    AntwortenLöschen
  4. Hy,

    ja ich war erst hier, aber komme noch mal um Bescheid zu sagen das ich euren Blog bei mir vorgestellt habe.

    http://lukanas-blog.blogspot.de/

    By Lukana

    AntwortenLöschen
  5. hallo :) wir hätten an einem blogdesign für unseren blog interesse.. wie läuft das ab? wir würden euren blog dann auch im gegenzug vorstellen!
    liebe grüße!
    together-greentree.blogspot.com

    AntwortenLöschen
  6. Hey :)

    Danke, dass du mich drauf aufmerksam gemacht hast! Echt nett. Bei mir sieht man zwar auch keinen Unterschied (das kann aber an meinem Template liegen, weil ich Blödmann da schon ziemlich rumgepfuscht hab; oder vielleicht liegt's ja daran, dass ich das normale Letterspacing drinnen hab), aber ich wollte es eigentlich gar nicht auf meinem Blog anwenden, sondern nur wissen wie es geht, von daher danke :)

    Alles Liebe!

    AntwortenLöschen
    Antworten
    1. Klasse, jetzt gings! Danke für den Tipp :) Du HTML-Göttin :P

      Löschen
  7. Hey :)
    Ja, die Transitions, ich liebe sie auch total!
    Kleiner Hinweis am Rande, es geht auch kürzer. Neu muss man nicht mehr duration schreiben, sondern transition: alleine reicht schon.
    Schön einen anderen Tutorialblog gefunden zu haben. Betreibe selbst ja auch einen und les total gerne welche :)

    Grüsse
    Myri

    AntwortenLöschen
  8. Ich habe das jetzt nicht für die Links benutzt, sondern für den Posttitel & das Problem ist jetzt, dass das aber ganz schnell wieder zurückgeht. Also dass wenn man drüber fährt, dass sich die Buchstaben dann ganz langsam voneinander entfernen, aber wenn ich den Mauszeiger wieder entferne geht das ganz schnell wieder in die alte Position, es 'fadet' also nicht.
    Habt ihr eine Lösung dafür?

    AntwortenLöschen