Step 03 - Downloads: Link-Mouseover-Effekte
Dieser Teil gehört mit zum Coden; zu den Links. Mouseovereffekt heisst, welcher Effekt sein soll, wenn man mit der Maus über den Link geht.
Hier habe ich einige Codes geschrieben, die ihr "downloaden" bzw. euch kopieren könnt.
1) Regeln
1) Verlinkt www.oylahomepagehilfe.de sichtbar zu den Credits bzw den Links!
2) Gebt die Codes nicht als eure eigenen aus!
3) Stellt die Codes nicht auf euer Seite als Download zur Verfügung!
4) Veränderungen, wie zB Farb-Hexwerte ändern etc, sind erlaubt.
Hier habe ich einige Beispiele mit den ensprechenden Codes. Die jeweiligen Farben könnt ihr selber ändern, indem ihr die Hexerte der Farben einfach ersetzt.
Aber Achtung: Einige funktionieren nicht in allen Browsern!
2) Einbau-Anleiung
Wenn ihr für einen dieser Effekte hier entschieden habt, kopiert den rechts angegebenen Quellcode.
Ihr geht jetzt zu eurem Designcode und betrachtet diesen CSS Teil:
a:link {
color: #0000ff;
text-decoration:none;
}
a:visited {
color: #0000ff;
text-decoration:none;
}
a:active {
color: #ffffff;
text-decoration:none;
}
a:hover {
color: #000000;
text-decoration:none;
}
Wenn ihr euch einen Hover-Effekt-Code kopiert und auf eurer Homepage benutzen wollt, dann müsst ihr diesen kompletten Code einfach ersetzen.
Alles, was ihr oben seht, muss weg und durch den neuen Code, den ihr weiter unten kopieren könnt, ersetzt werden.
3) Die Downloads
Effekt 01
|
Code:
a:link, a:active, a:visited {
text-decoration:underline; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; text-transform:none; line-height:normal; } a:hover { text-decoration:underline; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; line-height:normal; } |
Effekt 02
Code:
a:link, a:active, a:visited { text-decoration:none; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; border:none; } a:hover { text-decoration:none; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; border:1px solid #000000; } |
Effekt 03
Code:
a:link, a:active, a:visited {
text-decoration:none; color:#666666; font-size:16px; font-family:Arial, Helvetica, sans-serif; border:none; background-color:#CCCCCC; border-bottom:2px dotted #000066; } a:hover { text-decoration:none; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; border:none; background-color:#66CCFF; border-bottom:2px dotted #CC0000; } |
Effekt 04
Code:
a:link, a:active, a:visited {
text-decoration:none; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; border-left:5px solid #CC0000; border-bottom:none; border-right:none; border-top:none; padding-left:3px; } a:hover { text-decoration:none; color:#000000; font-size:16px; font-family:Arial, Helvetica, sans-serif; border-left:5px solid #330099 border-bottom:none; border-right:none; border-top:none; padding-left:3px; } |
Effekt 05
Code:
a:link, a:active, a:visited {
text-decoration:none; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; border-bottom:1px solid #CC0000; border-right:none; border-top:none; border-left:none; padding-left:15px; text-transform:none; } a:hover { text-decoration:none; color:#000099; font-size:16px; font-family:Arial, Helvetica, sans-serif; border-bottom:1px solid #CC0000; border-right:none; border-top:1px solid #CC0000; border-left:10px solid #CC0000; padding-left:5px; letter-spacing:1px; text-transform:lowercase; } |
Effekt 06
Code:
a:link, a:active, a:visited {
text-decoration:none; color:#CC0000; font-size:16px; font-family:Arial, Helvetica, sans-serif; border-bottom:1px solid #3300FF; border-right:none; border-top:none; border-left:none; text-transform:none; } a:hover { text-decoration:none; color:#3300FF; font-size:16px; font-family:Arial, Helvetica, sans-serif; border-bottom:1px solid #CC0000; border-right:none; border-top:none; border-left:none; text-transform:none; } |
