CSS Garden

Tipps und Tricks über Stylesheets

 

Schon besucht?

Es gibt viele Möglichkeiten, den Besucher auf einen bereits besuchten Link aufmerksam zu machen. Nachfolgend möchte ich Ihnen einige davon vorstellen.

Der Einfachheit halber werden sämtliche Effekte in den Beispielen "on hover" ausgelöst.

Farben

Eine der wohl am meisten verwendeten Möglichkeiten ist die dem besuchten Link eine andere Farbe zu geben.

a:visited {color: #006600;}

Durchgestrichen

Eine ganz einfache Art aber für den Besucher sehr effektiv, ist den Link durchzustreichen.

a:visited {text-decoration: line-through;}

Der Trick mit dem Hintergrundbild

Als nächstes werden wir ein Hintergrundbild plazieren. Dazu gibt es verschiedenen Möglichkeiten. Wir plazieren das Bild vor den Link und zeigen es an wenn der Link besucht wurde. Damit das Bild Platz hat erstellen wir vor dem Link und nach dem vorhergehigen Buchstaben einen Abstand.

a:visited {padding-left: 12px;}

Anschliessend fügen wir das Hintergrundbild ein.

a:visited{padding-left: 12px; background: url(/images/cross.jpg) no-repeat 0% 50%;}

Manipulation der Schriftgrösse und Schriftart

Bei diesem Beispiel werden wir die Schrift selbst verändern.

Beispiel: Kleinere Schrift:
a:visited {font-size 80%;}

Beispiel: Grossbuchstaben
a:visited {text-transform: uppercase;}

Der Hintergrund wird farbig

Hier verändern wir die Farbe des Hintergrunds

a:visited {background: #ffff3f;}

Optische Täuschung

Bei diesem Beispiel erstellen wir zuerst ein Image welches die beiden gewünschten Sichten zeigt.

Der folgende Trick ist nun nicht das Image auszutauschen, sondern nur die Position der Sicht zu wechseln. Nachfolgend die "Styles" die es dazu braucht.

Zuerst setzen wir das "a" Element. Hierbei ist wichtig "width" anzugeben, da das Element keinen geschriebenen Text aufweist.

a
{
display: block;
width: 100px;
height: 20px;
background: url("images/background.jpg") 0 0 no-repeat;
}

Weiter wird nun im Element a:visited die "background-position" mit einer negativen Position angegeben.

a:visited
{
background-position: -100px 0;
}

 

>Zurück

 

© 1997 - 2019