Hyperlinks werden im Quelltext mit dem Element <a>…</a> markiert. Mit CSS können Sie nun diesen Links völlig neue Gestaltungen mit ins Web geben, zum Beispiel die Unterstreichung von Links entfernen, die Text- und Hintergrundfarbe ändern und vieles mehr……
Fertiges Beispiel ansehen: Grafik anklicken bzw. Video anschauen
Problemstellung
Sie surfen auf einer Webseite mit sehr viel Text und mehreren [...]
Continue reading about Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 2
Hyperlinks werden im Quelltext mit dem Element <a>…</a> markiert. Mit CSS können Sie nun diesen Links völlig neue Gestaltungen mit ins Web geben, zum Beispiel die Unterstreichung von Links entfernen, die Text- und Hintergrundfarbe ändern und vieles mehr……
Fertiges Beispiel ansehen: Grafik anklicken bzw. Video anschauen
Problemstellung
Sie surfen auf einer Webseite mit sehr viel Text und mehreren [...]
Continue reading about Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 1
Remote Linking bedeutet lt. Definition von Chris Coyier von CSS Tricks, dass ein einzelner Link (Anker) mehrere Bereiche in verschiedenen Teilen einer Webseite ansprechen kann. Den Trick können Sie für schöne und coole Effekte anwenden, wobei diese alleine mit CSS realisierbar sind.
Ich habe darüber bereits ausführlich in meinem Artikel Multiple Remote Linking: Anleitung und [...]
Continue reading about CSS-Tricks: Multiple Remote Linking #2
Abschnitte wie mit einem Textmarker markieren
Fertiges Beispiel ansehen
Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach mit HTML und ein wenig CSS realisieren. Den gewünschten Textbereich mit dem <span>-Tag einschließen, einen Innenabstand (padding) festlegen und eine Hintergrundfarbe (background-color) angeben.
HTML-Quellcode:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<h2>CSS-Trick: Textmarker</h2>
<p>Effekte, die wie
<span style="color:#fff;background-color:#690;padding:0 3px;">Markierungen
eines Textmarkers</span>aussehen, lassen sich sehr einfach realisieren.</p>
<p>Den gewünschten Bereich [...]
Letzte Kommentare