Manchmal ist es notwendig, einem HTML-Element zusätzliche Informationen zu übergeben, für die sich jedoch kein passendes Attribut finden lässt. Mit HTML5 gibt es die Möglichkeit, individuelle Attribute für Dateninhalte zu erstellen. Diese können dann zum Beispiel mit JavaScript (oder CSS)ausgelesen und weiterverarbeitet werden. Gerade im Zusammenspiel mit JavaScript können zusätzliche Inhalte hilfreich sein, da man kein Attribut zweckentfremden muss und die individuellen Attribute ausschließlich so genutzt werden können, wie man es möchte. Data-Dashs erstellen Alle benutzerdefinierten Attribute haben eines gemeinsam: Sie begi ... mehr

Eigene Tooltips sind immer sehr beliebt, da sie gut an das eigene Layout angepasst werden können. I. d. R. werden dazu mehr oder minder aufwändige Javascripte verwendet. Das es auch relativ "einfach" und trotzdem ganz "schön" mit reinem CSS geht, soll dieses Beispiel zeigen. Quick und Dirty Wer diese Tooltips einfach nur anwenden möchte, verfährt einfach wie folgt: Den CSS-Style (siehe weiter unten) einfach in das eigene CSS übernehmen und für alle Links (<a>), die den "neuen" Tooltip verwenden möchten entweder <a href="#" data-tooltip="Das ist der neue Tooltip">Tooltip oben</a>  für einen Tooltip über dem Link o ... mehr

"Pfeile" oder "Störer" lassen sich einfach per CSS mit einem geschickten border realisieren. Das Beispiel der Klasse nachunten zeigt einen 20px großen Pfeil der nach unten zeigt. Ggf. den Pfeil absolute positionieren, damit er "überlappt" oder wenn er auf eine bestimmte Position zeigen soll (entsprechend left und top verwenden). Ein Beispiel für die Verwendung solcher Pfeile finden Sie im Beitrag Schöne Tooltip-Einblendunge mit CSS (ohne Javascript). .nachunten {    border-top: 20px solid #f00;   /* roter Pfeil */    border-left: 20px solid transparent;    border-right: 20px solid transparent;    /* position: absol ... mehr

Nachfolgend ein Beispiel für die Anwendung von Media Queries.  Der Codeauszug zeigt wie für unterschiedliche "Fensterbreiten" unterscheidliche CSS-Stile definiert werden können. Für Medien, denen nur maximal 480px zur Verfügung stehen (oder die Fensterbreite wird entsprechend verkleinert oder vergrößert) wird der Text in "rot" angezeigt. Für Medien größer 480px aber maximal 600px in "blau", größer 600px aber maximal 800px in "pink", etc. ... <style type="text/css">    @media (max-width: 480px) {      body { color: red; }    }    @media (min-width: 481px) and ... mehr

Durch die CSS-Angabe input {    color: #f00; } werden alle input-Elemente mit dem Color-Attribut - wie in diesem Beispiel mit einer roten Schrift-  angezeigt. Sollen verschiedene "Typen" der input-Elemente unterschiedlich gestaltet werden, können Klassen oder Individual-Formate (id) verwendet werden. Einfacher ist es für bestimmte input "Typen" eigenen Formate anzugeben: input[type="submit"] {    color: red; } input[type="text"] {    color: blue; } Im Beispiel wird der Submit-Button (type="submit") in rot, die ´Text-Felder (type="text") mit einer blauen Schrift angezeigt. So lassen sich für alle input-Elemente einfach eigene Fo ... mehr