Erstellt Theme
Themen im Einsatz:
☰ Filme
Gefroren
Die Antwort auf die Animationen war lächerlich.
Krieg der Sterne
Die Menschen waren für den neuen Star Wars-Film verlassen.
Die Rächer
Ein großer Erfolg für Marvel und Disney.
Erzeugte CSS:
Cinque Terre
Die Cinque Terre (fünf Länder) ist ein Teil der italienischen Riviera. Die Küste mit fünf Dörfer: Monte, Vernazza, Corniglia, Manarola und Riomaggiore ist ein UNESCO-Weltkulturerbe.
Monte
Monterosso al Mare befindet sich im Zentrum eines kleinen natürlichen Golf gelegen, mit einem kleinen künstlichen Riff geschützt, an der Riviera von La Spezia. Es ist das nördlichste Dorf der Cinque Terre.
Vernazza
Vernazza ist eine weitere der fünf Städte in der Region Cinque Terre. Vernazza ist die vierte Stadt in Richtung Norden. Es hat keinen Autoverkehr, und ist einer der wahrsten "Fischerdörfer" an der italienischen Riviera.
Color Themes
Mit W3.CSS, ist es einfach, Ihre Anwendungen mit Ihren eigenen Farbthemen anzupassen.
Beispiel
<!DOCTYPE html>
<html>
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet"
href=" /lib/w3-theme-indigo.css ">Vordefinierte Themen
In HTML-Anwendungen können Sie die Verwendung von Farben begrenzen, indem sie unterschiedliche Farbtöne von vordefinierten Farben wählen:
| w3-rot | Versuch es |
| w3-pink | Versuch es |
| w3-lila | Versuch es |
| w3-tief-lila | Versuch es |
| w3-Indigo | Versuch es |
| w3-blau | Versuch es |
| w3-hellblau | Versuch es |
| w3-cyan | Versuch es |
| w3-teal | Versuch es |
| w3-grün | Versuch es |
| w3-hellgrün | Versuch es |
| w3-Kalk | Versuch es |
| w3-khaki | Versuch es |
| w3-gelb | Versuch es |
| w3-Bernstein | Versuch es |
| w3-Orange | Versuch es |
| w3-deep-Orange | Versuch es |
| w3-blau-grau | Versuch es |
| w3-braun | Versuch es |
| w3-grau | Versuch es |
| w3-dunkelgrau | Versuch es |
| w3-schwarz | Versuch es |
| w3-w3ii | Versuch es |
Filme 2014
Gefroren
Die Antwort auf die Animationen war lächerlich
Die mieser
Berühren, Greifen und wirklich gut gemacht
Die Rächer
Ein großer Erfolg für Marvel und Disney
Filme 2014
Gefroren
Die Antwort auf die Animationen war lächerlich
Die mieser
Berühren, Greifen und wirklich gut gemacht
Die Rächer
Ein großer Erfolg für Marvel und Disney
Privat Themen
Mit W3.CSS, ist es einfach, eine Anwendung mit einem eigenen Farbthema anpassen.
Sie können in einem <link> Tag zu einem privaten Thema verknüpfen, oder Sie können in einem <style> Tag des privaten Thema setzen:
Beispiel
<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5
!important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6
!important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9
!important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da
!important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb
!important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0
!important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab
!important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f
!important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593
!important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e
!important}
.w3-theme-action {
color:#fff !important;background-color:#311b92
!important}
.w3-text-theme {
color:#1a237e !important}
</style>Hinzufügen von Gradients
Ein Leser schickte uns diesen Vorschlag: Sie könnten einen Gradienten betrachten wollen Zugabe für jedes Thema.
Ich benutzte die l2 und l1 Farben aus dem blauen Thema dieses Gradienten zu erzeugen:
Beispiel
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
Color Themes
Hier sind einige herunterladbare Farbthemen von Google-Material Design inspiriert:
| Style Sheet | Beschreibung |
|---|---|
| w3-theme-amber.css | Farbe Thema Bernstein |
| w3-theme-black.css | Farbthema Schwarz |
| w3-theme-blue.css | Farbe Blau Theme |
| w3-theme-blau-grey.css | Farbthema Blau Grau |
| w3-theme-brown.css | Farbe Theme Brown |
| w3-theme-cyan.css | Farbe Cyan Theme |
| w3-Thema-dark-grey.css | Farbe Theme Dunkelgrau |
| w3-theme-Tief orange.css | Farbthema Tiefer orange |
| w3-theme-Tief purple.css | Farbe Thema Deep Purple |
| w3-theme-green.css | Farbthema Grün |
| w3-theme-grey.css | Farbe Grau Theme |
| w3-theme-indigo.css | Farbthema Indigo |
| w3-theme-khaki.css | Farbthema Khaki |
| w3-theme-Licht-blue.css | Farbe Theme Light Blue |
| w3-theme-Licht-green.css | Farbe Theme Light Green |
| w3-theme-lime.css | Farbe Theme Lime |
| w3-theme-orange.css | Farbe Theme Orange |
| w3-theme-pink.css | Farbthema Rosa |
| w3-theme-purple.css | Farbthema Lila |
| w3-theme-red.css | Farbe Theme Red |
| w3-theme-teal.css | Farbthema Teal |
| w3-theme-yellow.css | Farbthema Gelb |