E-Mail-Link mit CSS visualisieren

Ähnlich wie Download-Links, kannst du ebenso auch einen E-Mail-Link mit CSS visualisieren. Das funktioniert genauso einfach und auch hier gibt es zwei Varianten, wie du eine Visualisierung machen kannst.

In diesem Artikel beschreibe ich, wie das funktioniert.

 

E-Mail-Link mit CSS visualisieren

Es gibt im Grunde genommen zwei Möglichkeiten, wie du einen E-Mail Link mit CSS visualisieren kannst. Eine Methode ist, dies per CSS Klasse zu machen. Dabei müsstest du jedoch jeden einzelnen Link entsprechend kennzeichnen.

Die andere Variante funktioniert ab CSS3 für alle Links automatisch. Dies wird aber von alten Browsern nicht unterstützt. Solltest du also noch viele Zugriffe von sehr alten Browsern auf deinen Seiten verzeichnen, solltest du lieber zur Variante mit den Klassen greifen.

 

Visualisierung per CSS Klasse

Per CSS Klasse funktioniert die Visualisierung eines E-Mail Links wie folgt.

Code für das Stylesheet:

a.email {
   background-image: url(email.gif);
   padding-right: 20px;
   background-repeat: no-repeat;
   background-position: right;
 }

 

Code für die Einbindung im HTML Code:

Lassen Sie uns doch eine <a href="mailto:webmaster@example.org">Nachricht per E-Mail</a>zukommen.

 

Visualisierung mit CSS

Einfacher ist es jedoch, die Visualisierung direkt mit CSS vorzunehmen. Dies funktioniert aber erst mit CSS 3. Die mailto: Links erhalten dabei automatisch eine angefügte Grafik.

Code:

<style type="text/css">
 a[href^='mailto:'] {
   padding-right: 20px;
   background: url(email.jpg) right no-repeat;
 }
 </style>

 

Erläuterung:

Der Browser kennzeichnet im Folgenden alle Links, die mit einem mailto: beginnen, mit der Grafik email.png. Die Grafik erscheint dabei 20 Pixel nach rechts versetzt vom Link.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.