Besuchte Links abhaken

Besuchte Links erkennt man an der geänderten Färbung. Wenn Ihnen dies nicht auffallend genug ist, dann heben Sie sie beispielsweise mit einem Häkchen hinter dem Link-Text hervor.

Sie benötigen dazu ein Grafiksymbol im Miniformat von 13 x 13 Bildpunkten. Legen Sie das Bild mit der folgenden CSS-Angabe in den Hintergrund des Hyperlinks:

a:visited { background:url (besucht.gif) no-repeat 100% 50%; }

Mit no-repeat verhindern Sie das Wiederholen der Grafik, und mit den beiden Prozentwerten ordnen Sie die Grafik im entsprechenden Abstand vom linken und oberen Rand an. Schaffen Sie mit der zusätzlichen CSS-Eigenschaft padding-right:15px; den Platz dafür rechts neben dem Beschreibungstext des Links.

Zusätzlichen Pep bekommen die abgehakten  Links, wenn sich das Symbol bei Berührung mit der Maus auch verfärbt. Erstellen Sie dazu eine kolorierte Version des Icons und binden Sie diese über die folgende CSS-Angabe ein:

a:visited:hover { background-image: url(besuchthover.gif) }

Wenn Sie die Maus über den Link halten, dann wird die Hintergrundgrafik ausgetauscht. Kombinieren Sie diese Formate wie folgt mit der klassischen Methode, Links farbig und ohne Unterstrich zu gestalten:

a:visited {
padding-right:15px;
background:url(besucht.gif) no-repeat 100% 50%;
text-decoration: none;
color:#F70;
}

a:visited:hover {
background-image: url(besuchthover.gif);
color:#F00;
}
Source: COM! 10/2007

CSS: Abgerundete Ecken

CASCADING STYLESHEETS 3
Abgerundete Ecken

Wer die Ecken bei Menüboxen und Infokästen abrunden möchte, muss in der Regel aufwendig mit Tabellen und bunten Grafiken tricksen. Beim neuen, noch nicht verabschiedeten Layoutstandard CSS 3 gelingt der gleiche Effekt deutlich einfacher. Erstellen Sie die Infobox mit der folgenden HTML-Zeile:

<div id="kasten1">Inhalt</div>

Formatieren Sie die Infobox anschließend mit dieser CSS-Angabe:

 #kastenl {background-color:red; width:250px; height:120px; padding:40px; border-radius:30px; -moz-border-radius:30px; }

Die CSS-Eigenschaft border-radius legt den Radius der abgerundeten Ecken in Pixeln fest. Notieren Sie zusätzlich die Angabe -moz-border-radius mit dem gleichen Wert. So lange der neue CSS-Standard noch nicht verabschiedet ist, unterstützt lediglich Firefox diesen eigenen leicht abgewandelten Formatnamen. Durch die geänderten Ecken kommt der Rand nun jedoch mit dem Inhalt der Box in Konflikt. Halten Sie deshalb mit der Angabe padding einige Pixel Abstand.

Sie brauchen übrigens nicht für jede Ecke die gleiche Krümmung zu verwenden (Bild A). Experimentieren Sie nach dem folgenden Muster mit unterschiedlichen Werten:

border-radius: 50px 20px 90px 20px;
-moz-border-radius: 50px 20px 90px 20px;

Beginnend oben links formatieren Sie mit diesem Befehls-Listing die Ecken im Uhrzeigersinn.

Ob die Operation das gewünschte Ergebnis zeigt, kontrollieren Sie in der aktuellen Firefox-Version. Browser wie der Internet Explorer 6, die dieses Format noch nicht unterstützen, präsentieren die Beispielbox weiterhin mit spitzen Ecken.

CSS Runde Ecken

CSS 3 in Aktion: Gestalten Sie individuelle Infokästen mit abgerundeten Ecken (Bild A)

Source: COM! 11/2006

Symbole bei Links mit CSS

CASCADING STYLESHEETS 3
Symbole für Text-Links

Oft sind Links auf andere Websites mit kleinen Symbolen gekennzeichnet. So erkennen die Besucher sofort, ob beim nächsten Mausklick eine externe Seite oder beispielsweise ein PDF-Dokument erscheint. Dieser Service ist arbeitsaufwendig, wenn Sie sämtliche Grafiken von Hand in Ihre Seiten einfügen.

Es geht auch einfacher: Nutzen Sie eine Formatierung des neuen, aber noch nicht verabschiedeten Standards CSS 3.

Ein einziger Befehl genügt, um externe Links einheitlich hervorzuheben:

a[href = “http”]:before {
content:url(extern.gif);
margin-right:5px; }

Sie formatieren damit alle Links, deren Parameter href mit http beginnt. Die Grafik extern.gif wird jedem dieser Links mit einem Abstand von fünf Pixel vorangestellt (Bild A).

Für PDF-Dateien eignet sich folgendes Format:

a[href = “.pdf”]:before {
content:url(‘pdf.gif’);
margin-right:5px; }

Damit prüfen Sie, ob die Zeichenkette bei href auf .pdf endet. Bei Firefox funktionieren diese Attributselektoren bereits problemlos. Und auch der Internet Explorer 7 wird sie unterstützen.

Symbole für Links (css)

CSS 3: Wenige Code-Zeilen reichen aus, um externe Links mit Symbolen zu kennzeichnen (Bild A)

Source: COM! 8/2006