Der normale Hover Effekt durch CSS reicht vielen aus, wer es jedoch etwas hübscher haben möchte, kann Mootools zur Hilfe nehmen. Durch ein paar Zeilen Code wird aus den 2 Zuständen (Normal & Hover) eine Animation gebildet. Dies ist ganz nützlich um ein wenig "Ambiente" in die Seite zu bringen und sie etwas dynamischer wirken zu lassen.
Dazu nutzen wir die Mootools Funktion tween, welche einen Überlauf zwischen zwei CSS Eigenschaften zulässt.
Nach ein paar schönen Tagen im Bayrischen Oberstdorf, stell ich euch nun das nächste Tutorial bereit. Diesmal handelt es sich um eine simple Tab-Navigation mittels Mootools.
Tabs sind im Trend... moderne Browser nutzen sie, Photoshop CS4 nutzt sie und auch viele Websites sind mit dieser platzsparenden Art der Contentverwaltung ausgestattet.
Sicherlich mag es mehrere Wege geben wie man diese Funktion umsetzten kann. Ich werde euch den Weg aufzeigen, welchen ich bisher immer genutzt habe. Für weitere, eventuell auch leichtere und bessere Umsetzungen würde ich mich über ein Kommentar freuen.
...oder auf Deutsch gesagt: Die Deckkraft von Bildern mit einem schönen Übergang verändern.
Sicherlich ist es möglich die Deckkraft einfach per CSS zu verändern und bei ":hover" dann die volle Deckkraft zu nutzen. Ich erkläre jedoch den Vorgang in zusammenarbeit mit dem JavaScript Framework Mootools, welches viele schöne Effekte mit sich bringt und somit ein fließender Übergang zwischen den beiden Stufen der Deckkraft möglich ist.
