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