W3.CSS-referentie
W3.CSS-klassen
| Klas |
definieert |
|
| w3-container |
HTML-container met 16px linker en rechter opvulling |
|
| |
Gebruikt als kop |
|
| |
Gebruikt als voettekst |
|
| w3-paneel |
HTML-container met 16px linker- en rechteropvulling en 16px boven- en ondermarge |
|
| |
Wordt gebruikt om een notitie weer te geven |
|
| |
Wordt gebruikt om een offerte weer te geven |
|
| w3-badge |
Ronde badge |
|
| w3 dag |
Rechthoekig label |
|
| w3-ul |
Ongeordende lijst |
|
| w3-display-container |
Container voor w3-display- classes (maakt positionering van elementen in de container mogelijk) |
|
| w3-blok |
Klasse die kan worden gebruikt om een volledige breedte voor elk element te definiëren |
|
| w3-code |
Codecontainer |
|
| w3-codespan |
Inline codecontainer (voor codefragmenten) |
|
| w3-inhoud |
Container voor gecentreerde inhoud van vaste grootte |
|
| w3-auto |
Container voor op responsieve grootte gecentreerde inhoud |
|
| w3-stretch |
Klasse die rechter- en linkermarges verwijdert (vooral handig voor het uitrekken van opgevulde rijen (w3-rij-opvulling)) |
|
| Klas |
definieert |
|
| w3-tafel |
Container voor een HTML-tabel |
|
| w3-gestreept |
Gestreepte tafel |
|
| w3-rand |
Begrensde tafel |
|
| w3-omrand |
omzoomde lijnen |
|
| w3-gecentreerd |
Gecentreerde tafel |
|
| w3-zwevend |
Zweefbare tafel |
|
| w3-table-all |
Alle eigenschappen ingesteld |
|
| |
Met w3-striped, w3-bordered en w3-bordered |
|
| |
Met gekleurd hoofd |
|
| |
Met w3-responsive |
|
| |
Met w3-tiny |
|
| |
Met w3-small |
|
| |
Met w3-groot |
|
| |
Met w3-xlarge |
|
| |
Met w3-xxlarge |
|
| |
Met w3-xxxlarge |
|
| |
Met kleur |
|
| |
Met w3-jumbo |
|
| w3-responsive |
Maakt een responsieve tabel |
|
| Klas |
definieert |
|
| w3-kaart |
Hetzelfde als w3-kaart-2 |
|
| w3-kaart-2 |
Container voor alle HTML-inhoud (2px omzoomde schaduw) |
|
| w3-kaart-4 |
Container voor alle HTML-inhoud (4px begrensde schaduw) |
|
| Klas |
definieert |
|
| w3-rij |
Container voor één rij vloeiende, responsieve inhoud |
|
| w3-rij-opvulling |
Rij waar alle kolommen een standaard opvulling hebben |
|
| w3-auto |
Container voor op responsieve grootte gecentreerde inhoud |
|
| w3-stretch |
Klasse die rechter- en linkermarges verwijdert |
|
| w3-half |
Halve (1/2) schermkolomcontainer |
|
| w3-derde |
Kolomcontainer van derde (1/3) scherm |
|
| w3-tweederde |
Kolomcontainer voor twee derde (2/3) scherm |
|
| w3-kwartaal |
Kwart (1/4) scherm kolomcontainer |
|
| w3-driekwart |
Driekwart (3/4) schermkolomcontainer |
|
| w3-col |
Kolomcontainer voor alle HTML-inhoud |
|
| w3-rust |
Neemt de rest van de kolombreedte in beslag |
|
| |
|
|
| l1 - l12 |
Responsieve formaten voor grote schermen |
|
| m1 - m12 |
Responsieve formaten voor middelgrote schermen |
|
| s1 - s12 |
Responsieve formaten voor kleine schermen |
|
| |
|
|
| w3-hide-small |
Verberg inhoud op kleine schermen (minder dan 601px) |
|
| w3-hide-medium |
Verberg inhoud op middelgrote schermen |
|
| w3-verberg-groot |
Verberg inhoud op grote schermen (groter dan 992px) |
|
| |
|
|
| w3-afbeelding |
Responsieve afbeelding |
|
| |
|
|
| w3-mobiel |
Voegt mobile-first responsiviteit toe aan elk element.
Geeft elementen weer als blokelementen op mobiele apparaten. |
|
| Klas |
definieert |
|
| w3-cel-rij |
Container voor lay-outkolommen (cellen). |
|
| w3-cel |
Lay-outkolom (cel). |
|
| w3-cel-top |
Lijnt inhoud uit boven aan een kolom (cel). |
|
| w3-cel-midden |
Lijnt inhoud uit op het verticale midden van een kolom (cel). |
|
| w3-celbodem |
Lijnt inhoud onder aan een kolom (cel) uit. |
|
| Klas |
definieert |
|
| w3-bar |
Horizontale balk |
|
| w3-bar-blok |
Verticale balk |
|
| w3-bar-item |
Biedt een gemeenschappelijke stijl voor baritems |
|
| w3-zijbalk |
Zijbalk |
|
| |
Een zijbalk kan alle soorten inhoud bevatten |
|
| |
Een zijbalk die de hoofdinhoud overlapt |
|
| |
Een zijbalk die alle hoofdinhoud overlapt |
|
| |
Een zijbalk die de hoofdinhoud naar rechts verschuift |
|
| |
Een zijbalk met een overlay-achtergrond |
|
| |
Een zijbalk aan de rechterkant |
|
| w3-collapse |
Wordt samen met w3-sidebar gebruikt om een volledig automatisch reagerende zijnavigatie te creëren. Om deze klasse te laten werken, moet de pagina-inhoud binnen een "w3-main" -klasse vallen |
|
| w3-hoofd |
Container voor pagina-inhoud bij gebruik van de klasse w3-collapse voor responsieve zijnavigatie |
|
| |
Volledig automatisch reagerende zijnavigatie aan de rechterkant |
|
| w3-dropdown-klik |
Klikbaar dropdown-element |
|
| w3-dropdown-hover |
Zweefbaar dropdown-element |
|
| |
Zweefbaar dropdown-element (gebruikt in w3-bar) |
|
| |
Zweefbaar dropdown-element (gebruikt in w3-bar-blok) |
|
| |
Zweefbaar dropdown-element (gebruikt in w3-zijbalk) |
|
| Klas |
definieert |
|
| w3-knop |
Rechthoekige knop met grijze achtergrondkleur bij zweven |
|
| w3-btn |
Rechthoekige knop met schaduwen bij zweven |
|
| w3-cirkel |
Kan worden gebruikt om een ronde knop te maken |
|
| w3-rimpeling |
Rechthoekige knop met rimpeleffect |
|
| |
Ronde zwevende knop met rimpeleffect |
|
| w3-bar |
Kan worden gebruikt om elementen (zoals knoppen) in een horizontale balk te groeperen |
|
| w3-blok |
Klasse die kan worden gebruikt om een w3-knop over de volledige breedte te definiëren |
|
| |
Volledige breedte w3-btn |
|
| |
Ronde knop over de volledige breedte |
|
| Klas |
definieert |
|
| w3-ingang |
Invoerelementen |
|
| |
Invoerformulier als kaart |
|
| |
Invoerelementen (toplabels) |
|
| |
Invoerelementen (onderste labels) |
|
| w3-check |
Invoertype selectievakje |
|
| w3-radio |
Type radio-ingang |
|
| w3-select |
Invoerselectie-element |
|
| w3-animate-invoer |
Animeert de breedte van een invoer tot 100% |
|
| Klas |
definieert |
|
| w3-modaal |
Modale container |
|
| w3-modal-content |
Modaal pop-upelement |
|
| w3-knopinfo |
Tooltip-element |
|
| w3-tekst |
Knopinfo-tekst |
|
| Klas |
definieert |
|
| w3-animate-top |
Animeert een element van de top -300px tot 0px |
|
| w3-animate-links |
Animeert een element van links -300px naar 0px |
|
| w3-animate-bottom |
Animeert een element vanaf de onderkant -300px tot 0px |
|
| w3-animate-right |
Animeert een element van rechts -300px naar 0px |
|
| w3-animate-dekking |
Animeert de dekking van een element van 0 tot 1 |
|
| w3-animatie-zoom |
Animeert een element van 0 tot 100% in grootte |
|
| w3-animate-fading |
Animeert de dekking van een element van 0 tot 1 en van 1 tot 0 (vervaagt in EN uit) |
|
| w3-spin |
Draai een pictogram 360 graden |
|
| |
Draai elk element 360 graden |
|
| w3-animate-invoer |
Animeert de breedte van een invoerveld tot 100% |
|
| Klas |
definieert |
|
| w3-tiny |
Specificeert een lettergrootte van 10 pixels |
|
| w3-klein |
Specificeert een lettergrootte van 12 pixels |
|
| w3-groot |
Specificeert een lettergrootte van 18 pixels |
|
| w3-xlarge |
Specificeert een lettergrootte van 24 pixels |
|
| w3-xxgroot |
Specificeert een lettergrootte van 32 pixels |
|
| w3-xxxgroot |
Specificeert een lettergrootte van 48 pixels |
|
| w3-jumbo |
Specificeert een lettergrootte van 64 pixels |
|
| w3-breed |
Specificeert een bredere tekst |
|
| w3-serif |
Verandert het lettertype in serif |
|
| w3-sans-serif |
Verandert het lettertype in schreefloos |
|
| w3-cursief |
Verandert het lettertype in cursief |
|
| w3-monospace |
Verandert het lettertype in monospace |
|
| Klas |
definieert |
|
| w3-center |
Gecentreerde inhoud |
|
| w3-links |
Drijft een element naar links (float: left) |
|
| w3-rechts |
Drijft een element naar rechts (float: rechts) |
|
| w3-links-uitlijnen |
Links uitgelijnde tekst |
|
| w3-rechts-uitlijnen |
Rechts uitgelijnde tekst |
|
| w3-rechtvaardigen |
Rechts en links uitgelijnde tekst |
|
| w3-blok |
Klasse die kan worden gebruikt om een volledige breedte voor elk element te definiëren |
|
| w3-cirkel |
Omcirkelde inhoud |
|
| w3-hide |
Verborgen inhoud (weergave: geen) |
|
| w3-show |
Inhoud weergeven (weergave:blok) |
|
| w3-show-block |
Alias van w3-show (display:block) |
|
| w3-show-inline-block |
Toon inhoud als inline-blok (display:inline-block) |
|
| w3-top |
Vaste inhoud bovenaan een pagina |
|
| w3-bodem |
Vaste inhoud onderaan een pagina |
|
| w3-display-container |
Container voor w3-display- klassen (positie: relatief) |
|
| w3-display-linksboven |
Geeft inhoud weer in de linkerbovenhoek van de w3-display-container |
|
| w3-display-rechtsboven |
Geeft inhoud weer in de rechterbovenhoek van de w3-display-container |
|
| w3-display-linksonder |
Geeft inhoud weer in de linkerbenedenhoek van de w3-display-container |
|
| w3-display-rechtsonder |
Geeft inhoud weer in de rechterbenedenhoek van de w3-display-container |
|
| w3-display-links |
Toont inhoud links (midden links) van de w3-display-container |
|
| w3-display-rechts |
Toont inhoud rechts (midden rechts) van de w3-display-container |
|
| w3-display-middle |
Geeft inhoud weer in het midden (midden) van de w3-display-container |
|
| w3-display-topmiddle |
Geeft inhoud bovenaan in het midden van de w3-display-container weer |
|
| w3-display-bottommiddle |
Toont inhoud onderaan in het midden van de w3-display-container |
|
| w3-display-positie |
Geeft inhoud weer op een opgegeven positie in de w3-display-container |
|
| w3-display-hover |
Geeft inhoud weer bij zweven in de w3-display-container |
|
| Klas |
definieert |
|
| w3-dekking |
Voegt dekking/transparantie toe aan een element (dekking: 0,6) |
|
| |
Dekking/transparantie aan tekst toevoegen |
|
| w3-dekking-uit |
Schakelt dekking/transparantie uit (dekking: 1) |
|
| w3-dekking-min |
Voegt dekking/transparantie toe aan een element (dekking: 0,75) |
|
| w3-dekking-max |
Voegt dekking/transparantie toe aan een element (dekking: 0,25) |
|
| w3-grijswaarden-min |
Voegt een grijswaardeneffect toe aan een element (grijswaarden: 50%) |
|
| w3-grijstinten |
Voegt een grijswaardeneffect toe aan een element (grijswaarden: 75%) |
|
| w3-grijswaarden-max |
Voegt een grijswaardeneffect toe aan een element (grijswaarden: 100%) |
|
| w3-sepia-min |
Voegt een sepia-effect toe aan een element (sepia: 50%) |
|
| w3-sepia |
Voegt een sepia-effect toe aan een element (sepia: 75%) |
|
| w3-sepia-max |
Voegt een sepia-effect toe aan een element (sepia: 100%) |
|
| w3-overlay |
Creëert een overlay-effect |
|
| Klas |
definieert |
|
| w3-rood |
Achtergrondkleur rood |
|
| w3-roze |
Achtergrondkleur roze |
|
| w3-paars |
Achtergrondkleur paars |
|
| w3-diep-paars |
Achtergrondkleur diep paars |
|
| w3-indigo |
Achtergrondkleur indigo |
|
| w3-blauw |
Achtergrondkleur blauw |
|
| w3-lichtblauw |
Achtergrondkleur lichtblauw |
|
| w3-cyaan |
Achtergrondkleur cyaan |
|
| w3-aqua |
Achtergrondkleur aqua |
|
| w3-taling |
Achtergrondkleur groenblauw |
|
| w3-groen |
Achtergrondkleur groen |
|
| w3-lichtgroen |
Achtergrondkleur lichtgroen |
|
| w3-limoen |
Achtergrondkleur limoen |
|
| w3-zand |
Achtergrondkleur zand |
|
| w3-kaki |
Achtergrondkleur kaki |
|
| w3-geel |
Achtergrondkleur geel |
|
| w3-oranje |
Achtergrondkleur amber |
|
| w3-oranje |
Achtergrondkleur oranje |
|
| w3-dieporanje |
Achtergrondkleur diep oranje |
|
| w3-blauw-grijs |
Achtergrondkleur blauw grijs |
|
| w3-bruin |
Achtergrondkleur bruin |
|
| w3-lichtgrijs |
Achtergrondkleur lichtgrijs |
|
| w3-grijs |
Achtergrondkleur grijs |
|
| w3-donkergrijs |
Achtergrondkleur donkergrijs |
|
| w3-zwart |
Achtergrondkleur zwart |
|
| w3-lichtrood |
Achtergrondkleur lichtrood |
|
| w3-lichtgeel |
Achtergrondkleur lichtgeel |
|
| w3-lichtgroen |
Achtergrondkleur lichtgroen |
|
| w3-lichtblauw |
Achtergrondkleur lichtblauw |
|
| w3-transparant |
Transparante achtergrondkleur |
|
Zweefkleurklassen
De bovenstaande kleuren kunnen ook worden gebruikt als hover-klassen:
| Klas |
definieert |
|
| w3-hover-wit |
Zweefkleur wit |
|
| w3-hover-zwart |
Zweefkleur zwart |
|
| w3-hover-rood |
Zweefkleur rood |
|
| w3-hover-blauw |
Zweefkleur blauw |
|
| w3-hover-groen |
Zweefkleur groen |
|
| w3-hover-aqua |
Zweefkleur aqua |
|
| w3-hover-oranje |
Zweefkleur oranje |
|
| w3-hover-grijs |
Zweefkleur grijs |
|
| w3-hover-bleek-groen |
Zweefkleur lichtgroen |
|
| Klas |
definieert |
|
| w3-tekst-rood |
Tekstkleur rood |
|
| w3-tekst-groen |
Tekstkleur groen |
|
| w3-tekst-blauw |
Tekstkleur blauw |
|
| w3-tekst-geel |
Tekstkleur geel |
|
| w3-tekst-lichtgrijs |
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 |
|
