W3.CSS-Standardfarbklassen
W3.CSS ist ein modernes CSS-Framework zum Gestalten von HTML-Seiten. Die in W3.CSS verwendete Standardfarbklasse ist vom Material Design inspiriert. Die Farben von Material Design spiegeln die Farben wider, die in Marketing, Verkehrsschildern und Haftnotizen verwendet werden.
Die folgenden W3.CSS-Farbklassen können für jedes HTML-Element verwendet werden.
Hier findest Du eine Übersicht über die Farben, die Du für die Gestaltung von Webseiten benutzen kannst.
Für die Einbindung sind folgende Links nötig:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> - für alles
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-metro.css"> - für Metro UI
W3-Farbklasse |
|---|
w3-red |
w3-pink |
w3-purple |
w3-deep-purple |
w3-indigo |
w3-blue |
w3-light-blue |
w3-cyan |
w3-aqua |
w3-teal |
w3-green |
w3-light-green |
w3-lime |
w3-sand |
w3-khaki |
w3-yellow |
w3-amber |
w3-orange |
w3-deep-orange |
w3-blue-gray |
w3-brown |
w3-light-gray |
w3-gray |
w3-dark-gray |
w3-black |
w3-pale-red |
w3-pale-yellow |
w3-pale-green |
w3-pale-blue |
| Diese nächsten Beispiele zeigen, wie Du Windows Metro-Farben mit W3.CSS verwenden kannst: |
w3-metro-light-green |
w3-metro-green |
w3-metro-dark-green |
w3-metro-magenta |
w3-metro-light-purple |
w3-metro-purple |
w3-metro-dark-purple |
w3-metro-darken |
w3-metro-teal |
w3-metro-light-blue |
w3-metro-blue |
w3-metro-dark-blue |
w3-metro-yellow |
w3-metro-orange |
w3-metro-dark-orange |
w3-metro-red |
w3-metro-dark-red |
| Windows 8 war das erste große Betriebssystem, das sich auf flaches Design und moderne Farben konzentrierte. Dieses Beispiel zeigt, wie Windows 8-Farben mit W3.CSS verwendet werden: Dazu muß folgender Link zu W3school gesetzt werden: <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-win8.css"> |
w3-win8-lime |
w3-win8-green |
w3-win8-emerald |
w3-win8-teal |
w3-win8-cyan |
w3-win8-blue |
w3-win8-cobalt |
w3-win8-indigo |
w3-win8-violet |
w3-win8-pink |
w3-win8-magenta |
w3-win8-crimson |
w3-win8-red |
w3-win8-orange |
w3-win8-amber |
w3-win8-yellow |
w3-win8-brown |
w3-win8-olive |
w3-win8-steel |
w3-win8-mauve |
w3-win8-taupe |
w3-win8-sienna |
| Ein weiteres beliebtes Farbschema ist Flat UI. Dafür ist folgender Link nötig: <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-flat.css"> |
w3-flat-turquoise |
w3-flat-green-sea |
w3-flat-emerald |
w3-flat-nephritis |
w3-flat-peter-river |
w3-flat-belize-hole |
w3-flat-amethyst |
w3-flat-wisteria |
w3-flat-wet-asphalt |
w3-flat-midnight-blue |
w3-flat-sun-flower |
w3-flat-orange |
w3-flat-carrot |
w3-flat-pumpkin |
w3-flat-alizarin |
w3-flat-pomegranate |
w3-flat-clouds |
w3-flat-silver |
w3-flat-concrete |
w3-flat-asbestos |