W3.CSS-Referenz
W3.CSS-Klassen
| Klasse |
Definiert |
|
| w3-Container |
HTML-Container mit 16 Pixel linkem und rechtem Padding |
|
| |
Wird als Überschrift verwendet |
|
| |
Wird als Fußzeile verwendet |
|
| w3-panel |
HTML-Container mit 16 Pixel linker und rechter Auffüllung und 16 Pixel oberem und unterem Rand |
|
| |
Wird verwendet, um eine Notiz anzuzeigen |
|
| |
Wird verwendet, um ein Angebot anzuzeigen |
|
| w3-Abzeichen |
Rundes Abzeichen |
|
| w3-tag |
Rechteckiges Etikett |
|
| w3-ul |
Ungeordnete Liste |
|
| w3-Display-Container |
Container für w3-Display- Klassen (ermöglicht die Positionierung von Elementen innerhalb des Containers) |
|
| w3-Block |
Klasse, die verwendet werden kann, um eine volle Breite für jedes Element zu definieren |
|
| w3-Code |
Code-Container |
|
| w3-codespan |
Inline-Code-Container (für Code-Snippets) |
|
| w3-Inhalt |
Container für zentrierten Inhalt mit fester Größe |
|
| w3 Auto |
Container für responsive, größenzentrierte Inhalte |
|
| w3-Stretch |
Klasse, die rechte und linke Ränder entfernt (besonders nützlich zum Dehnen von gepolsterten Zeilen (w3-row-padding)) |
|
| Klasse |
Definiert |
|
| w3-Tabelle |
Container für eine HTML-Tabelle |
|
| w3-gestreift |
Gestreifter Tisch |
|
| w3-Grenze |
Eingefasster Tisch |
|
| w3-begrenzt |
Eingefasste Linien |
|
| w3-zentriert |
Zentrierter Tisch |
|
| w3-schwebbar |
Schwebebarer Tisch |
|
| w3-Tabelle-all |
Alle Eigenschaften gesetzt |
|
| |
Mit w3-Streifen, w3-Bordüre und w3-Bordüre |
|
| |
Mit farbigem Kopf |
|
| |
Mit w3-responsive |
|
| |
Mit w3-winzig |
|
| |
Mit w3-klein |
|
| |
Mit w3-groß |
|
| |
Mit w3-xlarge |
|
| |
Mit w3-xxlarge |
|
| |
Mit w3-xxxlarge |
|
| |
Mit Farbe |
|
| |
Mit w3-jumbo |
|
| w3-responsive |
Erstellt eine responsive Tabelle |
|
| Klasse |
Definiert |
|
| w3-Karte |
Dasselbe wie w3-Karte-2 |
|
| w3-Karte-2 |
Container für beliebige HTML-Inhalte (2px umrandeter Schatten) |
|
| w3-Karte-4 |
Container für beliebige HTML-Inhalte (4px umrandeter Schatten) |
|
| Klasse |
Definiert |
|
| w3-Reihe |
Container für eine Zeile mit flüssig ansprechenden Inhalten |
|
| w3-Zeilen-Padding |
Zeile, in der alle Spalten eine Standardauffüllung haben |
|
| w3 Auto |
Container für responsive, größenzentrierte Inhalte |
|
| w3-Stretch |
Klasse, die rechte und linke Ränder entfernt |
|
| w3-halb |
Halber (1/2) Siebsäulenbehälter |
|
| w3-dritte |
Dritter (1/3) Bildschirmspaltencontainer |
|
| w3-zweidrittel |
Zwei Drittel (2/3) Siebsäulenbehälter |
|
| w3-Quartal |
Viertel (1/4) Siebsäulenbehälter |
|
| w3-dreiviertel |
Dreiviertel (3/4) Siebsäulenbehälter |
|
| w3-Spalte |
Spaltencontainer für beliebige HTML-Inhalte |
|
| w3-Rest |
Nimmt den Rest der Spaltenbreite ein |
|
| |
|
|
| l1 - l12 |
Responsive Größen für große Bildschirme |
|
| m1 - m12 |
Responsive Größen für mittlere Bildschirme |
|
| s1 - s12 |
Responsive Größen für kleine Bildschirme |
|
| |
|
|
| w3-hide-klein |
Inhalte auf kleinen Bildschirmen (weniger als 601 Pixel) ausblenden |
|
| w3-Hide-Medium |
Inhalte auf mittleren Bildschirmen ausblenden |
|
| w3-hide-large |
Inhalte auf großen Bildschirmen (größer als 992 Pixel) ausblenden |
|
| |
|
|
| w3-Bild |
Ansprechendes Bild |
|
| |
|
|
| w3-mobil |
Fügt jedem Element eine Mobile-First-Reaktionsfähigkeit hinzu.
Zeigt Elemente als Blockelemente auf Mobilgeräten an. |
|
| Klasse |
Definiert |
|
| w3-Zelle-Zeile |
Container für Layoutspalten (Zellen). |
|
| w3-Zelle |
Layoutspalte (Zelle). |
|
| w3-cell-top |
Richtet den Inhalt am oberen Rand einer Spalte (Zelle) aus. |
|
| w3-Zelle-Mitte |
Richtet den Inhalt an der vertikalen Mitte einer Spalte (Zelle) aus. |
|
| w3-Zelle-unten |
Richtet den Inhalt am unteren Rand einer Spalte (Zelle) aus. |
|
| Klasse |
Definiert |
|
| w3-bar |
Horizontale Linie |
|
| w3-Bar-Block |
Vertikaler Balken |
|
| w3-bar-item |
Bietet einen gemeinsamen Stil für Bar-Elemente |
|
| w3-Seitenleiste |
Seitenleiste |
|
| |
Eine Seitenleiste kann alle Arten von Inhalten enthalten |
|
| |
Eine Seitenleiste, die den Hauptinhalt überlagert |
|
| |
Eine Seitenleiste, die alle Hauptinhalte überlagert |
|
| |
Eine Seitenleiste, die den Hauptinhalt nach rechts verschiebt |
|
| |
Eine Seitenleiste mit Overlay-Hintergrund |
|
| |
Eine Seitenleiste auf der rechten Seite |
|
| w3-Kollaps |
Wird zusammen mit w3-sidebar verwendet, um eine vollautomatische responsive Seitennavigation zu erstellen. Damit diese Klasse funktioniert, muss sich der Seiteninhalt in einer „w3-main“-Klasse befinden |
|
| w3-main |
Container für Seiteninhalte bei Verwendung der w3-collapse-Klasse für responsive Seitennavigationen |
|
| |
Vollautomatische rechtsseitige responsive Seitennavigation |
|
| w3-Dropdown-Klick |
Anklickbares Dropdown-Element |
|
| w3-Dropdown-Hover |
Hoverbares Dropdown-Element |
|
| |
Hoverbares Dropdown-Element (wird in w3-bar verwendet) |
|
| |
Hoverbares Dropdown-Element (wird in w3-bar-block verwendet) |
|
| |
Hoverbares Dropdown-Element (wird in der w3-Seitenleiste verwendet) |
|
| Klasse |
Definiert |
|
| w3-Taste |
Rechteckige Schaltfläche mit grauer Hintergrundfarbe beim Schweben |
|
| w3-btn |
Rechteckige Schaltfläche mit Schatten beim Schweben |
|
| w3-Kreis |
Kann verwendet werden, um eine kreisförmige Schaltfläche zu erstellen |
|
| w3-Welligkeit |
Rechteckiger Knopf mit Kräuseleffekt |
|
| |
Kreisförmig schwebender Knopf mit Welleneffekt |
|
| w3-bar |
Kann verwendet werden, um Elemente (wie Schaltflächen) in einer horizontalen Leiste zu gruppieren |
|
| w3-Block |
Klasse, die verwendet werden kann, um eine w3-Schaltfläche in voller Breite zu definieren |
|
| |
Volle Breite w3-btn |
|
| |
Kreisförmiger Knopf in voller Breite |
|
| Klasse |
Definiert |
|
| w3-Eingabe |
Eingabeelemente |
|
| |
Eingabeformular als Karte |
|
| |
Eingabeelemente (obere Beschriftungen) |
|
| |
Eingabeelemente (untere Beschriftungen) |
|
| w3-check |
Kontrollkästchen-Eingabetyp |
|
| w3-Radio |
Funkeingangstyp |
|
| w3-wählen |
Select-Element eingeben |
|
| w3-animieren-Eingabe |
Animiert die Breite einer Eingabe auf 100 % |
|
| Klasse |
Definiert |
|
| w3-modal |
Modaler Container |
|
| w3-modaler Inhalt |
Modales Popup-Element |
|
| w3-Kurzinfo |
Tooltip-Element |
|
| w3-Text |
Tooltip-Text |
|
| Klasse |
Definiert |
|
| w3-animate-top |
Animiert ein Element von oben -300px bis 0px |
|
| w3-animieren-links |
Animiert ein Element von links -300px bis 0px |
|
| w3-animieren-unten |
Animiert ein Element von unten -300px bis 0px |
|
| w3-animieren-rechts |
Animiert ein Element von rechts -300px bis 0px |
|
| w3-animate-opacity |
Animiert die Deckkraft eines Elements von 0 auf 1 |
|
| w3-animieren-zoom |
Animiert ein Element mit einer Größe von 0 bis 100 % |
|
| w3-animate-fading |
Animiert die Deckkraft eines Elements von 0 auf 1 und 1 auf 0 (blendet ein UND aus) |
|
| w3-Spin |
Drehen Sie ein Symbol um 360 Grad |
|
| |
Drehen Sie jedes Element um 360 Grad |
|
| w3-animieren-Eingabe |
Animiert die Breite eines Eingabefelds auf 100 % |
|
| Klasse |
Definiert |
|
| w3-winzig |
Gibt eine Schriftgröße von 10 Pixel an |
|
| w3-klein |
Gibt eine Schriftgröße von 12 Pixel an |
|
| w3-groß |
Gibt eine Schriftgröße von 18 Pixel an |
|
| w3-xlarge |
Gibt eine Schriftgröße von 24 Pixel an |
|
| w3-xxlarge |
Gibt eine Schriftgröße von 32 Pixel an |
|
| w3-xxxgroß |
Gibt eine Schriftgröße von 48 Pixel an |
|
| w3-jumbo |
Gibt eine Schriftgröße von 64 Pixel an |
|
| w3-weit |
Gibt einen breiteren Text an |
|
| w3-serif |
Ändert die Schriftart in Serifen |
|
| w3-serifenlos |
Ändert die Schriftart in Sans-Serif |
|
| w3-kursiv |
Ändert die Schriftart in Kursiv |
|
| w3-monospace |
Ändert die Schriftart in Monospace |
|
| Klasse |
Definiert |
|
| w3-Zentrum |
Zentrierter Inhalt |
|
| w3-links |
Verschiebt ein Element nach links (float: left) |
|
| w3-richtig |
Verschiebt ein Element nach rechts (float: right) |
|
| w3-linksbündig |
Linksbündiger Text |
|
| w3-rechtsbündig |
Rechtsbündiger Text |
|
| w3-begründen |
Rechts- und linksbündiger Text |
|
| w3-Block |
Klasse, die verwendet werden kann, um eine volle Breite für jedes Element zu definieren |
|
| w3-Kreis |
Eingekreister Inhalt |
|
| w3-verbergen |
Versteckter Inhalt (Anzeige:none) |
|
| w3-zeigen |
Inhalt anzeigen (display:block) |
|
| w3-show-block |
Alias von w3-show (display:block) |
|
| w3-show-inline-block |
Inhalt als Inline-Block anzeigen (display:inline-block) |
|
| w3-oben |
Fester Inhalt oben auf einer Seite |
|
| w3-unten |
Fester Inhalt am Ende einer Seite |
|
| w3-Display-Container |
Container für w3-Display- Klassen (Position: relativ) |
|
| w3-Anzeige-oben links |
Zeigt Inhalt in der oberen linken Ecke des w3-Display-Containers an |
|
| w3-Anzeige-oben rechts |
Zeigt Inhalt in der oberen rechten Ecke des w3-Display-Containers an |
|
| w3-Anzeige-unten links |
Zeigt den Inhalt in der linken unteren Ecke des w3-Display-Containers an |
|
| w3-Anzeige unten rechts |
Zeigt den Inhalt in der unteren rechten Ecke des w3-Display-Containers an |
|
| w3-Anzeige-links |
Zeigt den Inhalt links (Mitte links) des w3-Display-Containers an |
|
| w3-Anzeige-rechts |
Zeigt den Inhalt rechts (Mitte rechts) des w3-Display-Containers an |
|
| w3-Display-Mitte |
Zeigt Inhalt in der Mitte (Mitte) des w3-Display-Containers an |
|
| w3-display-topmiddle |
Zeigt den Inhalt oben in der Mitte des w3-Display-Containers an |
|
| w3-display-untenmitte |
Zeigt den Inhalt unten in der Mitte des w3-Display-Containers an |
|
| w3-Anzeigeposition |
Zeigt Inhalt an einer bestimmten Position im w3-Display-Container an |
|
| w3-Display-Hover |
Zeigt Inhalte beim Hover im w3-Display-Container an |
|
| Klasse |
Definiert |
|
| w3-Opazität |
Fügt einem Element Deckkraft/Transparenz hinzu (Deckkraft: 0,6) |
|
| |
Hinzufügen von Deckkraft/Transparenz zu Text |
|
| w3-opacity-off |
Deaktiviert Deckkraft/Transparenz (Deckkraft: 1) |
|
| w3-opacity-min |
Fügt einem Element Deckkraft/Transparenz hinzu (Deckkraft: 0,75) |
|
| w3-Deckkraft-max |
Fügt einem Element Deckkraft/Transparenz hinzu (Deckkraft: 0,25) |
|
| w3-Graustufen-min |
Fügt einem Element einen Graustufeneffekt hinzu (Graustufen: 50 %) |
|
| w3-Graustufen |
Fügt einem Element einen Graustufeneffekt hinzu (Graustufen: 75 %) |
|
| w3-Graustufen-max |
Fügt einem Element einen Graustufeneffekt hinzu (Graustufen: 100 %) |
|
| w3-sepia-min |
Fügt einem Element einen Sepia-Effekt hinzu (Sepia: 50 %) |
|
| w3-sepia |
Fügt einem Element einen Sepia-Effekt hinzu (Sepia: 75 %) |
|
| w3-sepia-max |
Fügt einem Element einen Sepia-Effekt hinzu (Sepia: 100 %) |
|
| w3-Overlay |
Erzeugt einen Überlagerungseffekt |
|
| Klasse |
Definiert |
|
| w3-rot |
Hintergrundfarbe rot |
|
| w3-rosa |
Hintergrundfarbe rosa |
|
| w3-lila |
Hintergrundfarbe lila |
|
| w3-dunkelviolett |
Hintergrundfarbe tiefviolett |
|
| w3-indigo |
Hintergrundfarbe Indigo |
|
| w3-blau |
Hintergrundfarbe blau |
|
| w3-hellblau |
Hintergrundfarbe hellblau |
|
| w3-cyan |
Hintergrundfarbe Cyan |
|
| w3-aqua |
Hintergrundfarbe Aqua |
|
| w3-blaugrün |
Hintergrundfarbe blaugrün |
|
| w3-grün |
Hintergrundfarbe grün |
|
| w3-hellgrün |
Hintergrundfarbe hellgrün |
|
| w3-kalk |
Hintergrundfarbe Kalk |
|
| w3-Sand |
Hintergrundfarbe sand |
|
| w3-khaki |
Hintergrundfarbe Khaki |
|
| w3-gelb |
Hintergrundfarbe gelb |
|
| w3-bernstein |
Hintergrundfarbe Bernstein |
|
| w3-Orange |
Hintergrundfarbe orange |
|
| w3-tieforange |
Hintergrundfarbe tieforange |
|
| w3-blaugrau |
Hintergrundfarbe blaugrau |
|
| w3-braun |
Hintergrundfarbe braun |
|
| w3-hellgrau |
Hintergrundfarbe hellgrau |
|
| w3-grau |
Hintergrundfarbe grau |
|
| w3-dunkelgrau |
Hintergrundfarbe dunkelgrau |
|
| w3-schwarz |
Hintergrundfarbe schwarz |
|
| w3-hellrot |
Hintergrundfarbe hellrot |
|
| w3-hellgelb |
Hintergrundfarbe hellgelb |
|
| w3-hellgrün |
Hintergrundfarbe hellgrün |
|
| w3-hellblau |
Hintergrundfarbe hellblau |
|
| w3-transparent |
Transparente Hintergrundfarbe |
|
Hover-Farbklassen
Die obigen Farben können auch als Hover-Klassen verwendet werden:
| Klasse |
Definiert |
|
| w3-hover-weiß |
Hoverfarbe weiß |
|
| w3-hover-schwarz |
Hoverfarbe schwarz |
|
| w3-hover-rot |
Hover-Farbe rot |
|
| w3-hover-blau |
Hoverfarbe blau |
|
| w3-hover-grün |
Hover-Farbe grün |
|
| w3-hover-aqua |
Hover-Farbe Aqua |
|
| w3-hover-orange |
Hover-Farbe orange |
|
| w3-hover-grau |
Hoverfarbe grau |
|
| w3-hover-hellgrün |
Hoverfarbe blassgrün |
|
| Klasse |
Definiert |
|
| w3-text-rot |
Textfarbe rot |
|
| w3-text-grün |
Textfarbe grün |
|
| w3-text-blau |
Textfarbe blau |
|
| w3-text-gelb |
Textfarbe gelb |
|
| w3-text-hellgrau |
Text color light-grey |
|
| w3-text-grey |
Text color grey |
|
| w3-text-dark-grey |
Text color dark grey |
|
| w3-text-black |
Text color black |
|
| w3-text-white |
Text color white |
|
| w3-text-pink |
Text color pink |
|
| w3-text-purple |
Text color purple |
|
| w3-text-teal |
Text color teal |
|
| w3-text-light-green |
Text color light green |
|
| w3-text-lime |
Text color lime |
|
| w3-text-deep-purple |
Text color deep purple |
|
| w3-text-indigo |
Text color indigo |
|
| w3-text-light-blue |
Text color light blue |
|
| w3-text-blue-grey |
Text color blue grey |
|
| w3-text-cyan |
Text color cyan |
|
| w3-text-aqua |
Text color aqua |
|
| w3-text-amber |
Text color amber |
|
| w3-text-orange |
Text color orange |
|
| w3-text-deep-orange |
Text color deep orange |
|
| w3-text-sand |
Text color sand |
|
| w3-text-khaki |
Text color khaki |
|
| w3-text-brown |
Text color brown |
|
The text classes above can also be used as hover classes:
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
|
| w3-hover-text-green |
Hover text color green |
|
| w3-hover-text-blue |
Hover text color blue |
|
| w3-hover-text-yellow |
Hover text color yellow |
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
|
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
|
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
|
| w3-hover-shadow |
Adds shadow to an element on hover |
|
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
|
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
|
| w3-hover-none |
Removes hover effects from an element |
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
|
| w3-round-small |
Element rounded (border-radius) 2px |
|
| w3-round-medium |
Element rounded (border-radius) 4px |
|
| w3-round-large |
Element rounded (border-radius) 8px |
|
| w3-round-xlarge |
Element rounded (border-radius) 16px |
|
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
|
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
|
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
|
| w3-padding-16 |
Padding 16px top and bottom |
|
| w3-padding-24 |
Padding 24px top and bottom |
|
| w3-padding-32 |
Padding 32px top and bottom |
|
| w3-padding-48 |
Padding 48px top and bottom |
|
| w3-padding-64 |
Padding 64px top and bottom |
|
| w3-padding-top-64 |
Padding 64px on top |
|
| w3-padding-top-48 |
Padding 48px on top |
|
| w3-padding-top-32 |
Padding 32px on top |
|
| w3-padding-top-24 |
Padding 24px on top |
|
| Class |
Defines |
|
| w3-margin |
Adds an 16px margin to an element |
|
| w3-margin-top |
Adds an 16px top margin to an element |
|
| w3-margin-right |
Adds an 16px right margin to an element |
|
| w3-margin-bottom |
Adds an 16px bottom margin to an element |
|
| w3-margin-left |
Adds an 16px left margin to an element |
|
| w3-section |
Adds an 16px top and bottom margin to an element |
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
|
| w3-border-top |
Border top |
|
| w3-border-right |
Border right |
|
| w3-border-bottom |
Border bottom |
|
| w3-border-left |
Border left |
|
| w3-border-0 |
Removes all borders |
|
| w3-border-color |
Displays any defined borders in a specified color (like red, etc) |
|
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
|
| w3-leftbar |
Adds a thick left border (bar) to an element |
|
| w3-rightbar |
Adds a thick right border (bar) to an element |
|
| w3-topbar |
Adds a thick top border (bar) to an element |
|
| w3-hover-border-color |
Hoverable border color |
|
