nicht angemeldet
Pseude-3D-Rahmen um Links mit Hover-Effekt
Hallo.
Ich habe bei http://www.the5k.org/ einen kleinen, aber schönen Effekt gefunden:
Die dortigen Links sind mit einem Rahmen versehen, der sich über CSS-Angeban ändert, wenn man mit dem Mauszeiger darüber fährt. So entsteht ein kleiner 3D-Effekt.
Nur leider komme ich nicht so ganz hinter den Trick. Ich habe mir die CSS angesehen und auch den Quellcode, aber wirklich verstanden habe ich ihn nicht.
Kann mir das jemand vielleicht an einem wenig komplexen Beispiel erläutern?
Danke.
-
hi
ich hab's ja selbst so....:)
Der Border ist eigentlich schon immer da, um Verschiebungen beim :hover zu vermeiden, allerdings hat dieser anfangs border-color:transparent und border-style:solid, wodurch er unsichtbar ist. In a:hover wird dann die Farbe geändert und der border-style: auf einen der 3D-Werte gesetzt.
Achtung: den "normalen" a{} muss man mit @media all{} umklammern (also @media all{a{}}, damit Netscape 4 nicht Amok läuft - der hasst Ränder um Links...Grüße aus Bleckede
Kai
-
Hi.
Leider kann ich a gar keine border-Eigenschaften zuweisen. Weder IE5.0 noch Opera5.11 zeigen z.B. a:link { border:1px solid black; } an. Irgendwie habe ich da vermutlich einen Denkfehler drin...
P.S.: Wie ist den die URL Deiner Seite? Unter http://mozilla.linuxfaqs.de/ habe ich nichts dergleichen gefunden.
Stefan
-
Hi
Leider kann ich a gar keine border-Eigenschaften zuweisen. Weder IE5.0 noch Opera5.11 zeigen z.B. a:link { border:1px solid black; } an. Irgendwie habe ich da vermutlich einen Denkfehler drin...
a{border:1px solid black;} - versuch den mal :)
P.S.: Wie ist den die URL Deiner Seite? Unter http://mozilla.linuxfaqs.de/ habe ich nichts dergleichen gefunden.
direkt auf linuxfaqs.de isses so.
Grüße aus Bleckede
Kai
-
Du bist aber lange wach :). Danke für Deine Mühe...
Ich habe jetzt etwas Funktionierendes:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<style type="text/css">
<!--
#bla a {
float:left;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black; }
#bla a:hover { border-top: 2px solid black;
border-left: 2px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
//-->
</style>
</head>
<body>
<div id="bla">
<a href="#"><img src="images/xyz.png" border="0"></a>
</div>
</body>
</html>ABER: Warum zum Geier brauche ich da ein float??? Ohne float geht es nicht. Wie soll man denn darauf kommen?
Habe jetzt das CSS von http://www.the5k.org/ so lange reduziert, bis es nicht mehr ging und es war dieser komische float-Style. Das war so ziemlich das Letzte, was ich gelöscht habe, weil ich dachte: "Nee, also daran kann es ja wohl nicht liegen. Hat doch nur was mit Textumfluss zu tun."Stefan
-
-
-