weicher Farbübergang

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Status
Es sind keine weiteren Antworten möglich.

virtuellesNugat

Neues Mitglied
24 November 2004
41
0
0
www.nugat.rockt.de
weicher Farbübergang

Hi Leute!
Ich bin neu in der Community und habe mich soeben registriert. Ich heiße Matthias und bin 18 Jahre alt, lerne grade HTML/CSS in der Schule, für weitere Infos müsst ihr mein Profil einsehen :D

Nu hab ich aber schon meine erste Frage:

Ich hab schon auf vielen Seiten gesehen, dass wenn man die Maus über einen Link hält, dass sich dann die Farbe sozusagen flüssiß verändert. Nicht wie bei der a:hover Funktion, einfach n normaler Farbwechsel. Da ich noch lerne und eigentlich kaum einen Plan von HTML/CSS habe (PHP etc schon gar nicht ;)) frag ich mich wie und womit das geht. Ich habe mir jetzt einfach mal gedacht, oder besser gesagt gehofft, dass das mit CSS geht. Könnte mich bitte jemand aufklären? Ich finde den Effekt nämlich ziemlich schön...

Danke!
 

SolCom

Mitglied
13 November 2004
491
1
18
soweit ich weiß bekommt man es mit CSS (zumindest alleine) nicht hin. obwohl ich ein element gerade kennengelernt habe mit dem ich noch nichts anfangen kann :
Code:
a:focus
aber ich bin mir sicher das fayyaz dir weiterhelfen kann, dürfte nicht lange dauern bis du eine antwort hast :)
 

virtuellesNugat

Neues Mitglied
24 November 2004
41
0
0
www.nugat.rockt.de
Naja, danke dir trotzdem. Focus heißt ja eignetlch fixieren. Also bei VBA kann man mit dem Command z.B. machen, dass eine Zeile im Formular direkt von Anfang an, oder nach einer bestimmten Funktion, blinkt. Also, dass der Cursor dirket da drin ist.
Dementsprechend kann ich mir das nciht so ganz vorstellen, außerdem wüsste ich ja nciht wie ich den dann verwenden sollte :D

Allerdings fällt mir leider spontan keine Seite mit solchen Links ein, dann könnte man ja mal die CSS Dateien durchfosten ^^
 

feyyaz

Neues Mitglied
13 November 2004
349
0
0
www.paob.de
mit normalem html oder css ist das nicht möglich. mit javascript gibt es eine möglichkeit, aber das ist recht komplex und ich hab es nur im IE zum laufen gebracht. hier ein Tutorial mit beispiel

http://www.jswelt.de/index.php?opencat=JavaScripts&artid=989419979#

Zweite möglichkeit ist flash, damit kannst du optisch machen was du willst.

drittens wäre ein fake, aber noch am einfachsten. du benutzt ein rollover, wo das zweite bild eine gif animation ist die nur einmal läuft und dabei halt immer heller wird oder die farbe wechselt, wie du möchtest. Bei interesse frage im forum JavaScript wie ein rollover erstellt wird.
 

virtuellesNugat

Neues Mitglied
24 November 2004
41
0
0
www.nugat.rockt.de
Hmmm.. okay, dann nehme ich davon mal Abstand :D Aber mcih interessiert das sowieso wie man das Zeugs da macht. Ich schätze dieser Rollover ist dann auch für die Linkbuttons zuständig, die erst dann richtig klar werden wenn da die Maus drüber ist, oder?

Eigentlich könnte man das auch gut faken schätze ich mal...
 

feyyaz

Neues Mitglied
13 November 2004
349
0
0
www.paob.de
Ein Rollover ist ein JavaScript das, wenn der user mit der maus über einem bild ist, dieses durch ein anderes Bild austauscht.

Wir haben also standart mäßig ein bild mit schwarzer schrift. wenn der benutzer nun mit der Maus auf diese bild zeigt, ersetzen wir diese bild durch das gleiche bild, nur der text ist nun weiß. dadurch entsteht der eindruck von einem link:hover. In diesem fall untersheidet sich ein link nicht von einem rollover, ausser das wir hier (weil pixelgrafik) alle möglichen schriften/icons verwenden können. Für einen fade effekt muß das zu ersetzende bild eine gif animation sein.
 

virtuellesNugat

Neues Mitglied
24 November 2004
41
0
0
www.nugat.rockt.de
Danke!

@ SolCom

zu deinem

Code:
a:focus
Das ist nur dafür da, dass du mit der Tab-Taste wie durch ein Formular springen kannst. Nur halt bei den links, eignetlich ganz nett, die hover Funktion wird trotzdem verwendet. So kannst du auch an zwei Stellen glecihzeitig die hover Funktion erscheinen lassen.
 
Status
Es sind keine weiteren Antworten möglich.
Werbung: