HTML Tag ABBR – wie man Erklär-Popups mit HTML und CSS erstellen kann

von | Mrz 16, 2023 | Design | 0 Kommentare

Schlagwörter: HTML - Webdesign

Inhaltsverzeichnis

Es gibt immer wieder HTML Tags die sind fast unbekannt für die meisten Webentwickler. Entweder weil sie seit Urzeiten funktionieren oder weil sie eher zu den neueren Entwicklungen gehören. Ja, denn auch HTML wird dauernd weiter entwickelt wie auch CSS und alle anderen Programmiersprachen.

Heut möchte ich euch ein sehr praktisches Urgestein erklären, damit kann man nämlich sehr spannendes machen. So kann man mit dem ABBR Tag kleine Erklärungen machen. Ihr könnt so Wörter direkt erklären und müsst nicht gleich ein Glossar führen.

Video

HTML

1
Ich bin <abbr title="Verfasser von Blog-Beiträgen">Blogger</abbr> aus der Schweiz

CSS

Einfärben

Man kann natürlich einfach den Inhalt des ABBR Tags einfärben, dafür verwendet man das hier

1
2
3
abbr {
        color: red;
      }

Will man aber auch das PopUp Stylen kann man das hier verwenden

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
abbr { color: red; }
 
abbr[title] {
        position: relative;
 
        /* ensure consistent styling across browsers */
        text-decoration: underline double;
      }
 
      abbr[title]:hover::after,
      abbr[title]:focus::after {
        content: attr(title);
 
        /* position tooltip like the native one */
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;
 
        /* style tooltip */
        background-color: #1e1e1e;
        color: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        font-size: 25px;
        padding: 3px 5px;
      }




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Kurse / Webinare

Meine nächste Webinare / Kurse