W3.CSS Verwysing
W3.CSS Klasse
| Klas |
Definieer |
|
| w3-houer |
HTML-houer met 16px linker- en regtervulling |
|
| |
Word as kopskrif gebruik |
|
| |
Word as voetskrif gebruik |
|
| w3-paneel |
HTML-houer met 16px linker- en regtervulling en 16px boonste en onderste kantlyn |
|
| |
Word gebruik om 'n nota te vertoon |
|
| |
Word gebruik om 'n kwotasie te vertoon |
|
| w3-kenteken |
Omsendbrief kenteken |
|
| w3 dag |
Reghoekige merker |
|
| w3-ul |
Ongeordende lys |
|
| w3-skerm-houer |
Houer vir w3-vertoon- klasse (maak posisionering van elemente binne die houer moontlik) |
|
| w3-blok |
Klas wat gebruik kan word om 'n volle breedte vir enige element te definieer |
|
| w3-kode |
Kodehouer |
|
| w3-kodespan |
Inlyn kodehouer (vir kodebrokkies) |
|
| w3-inhoud |
Houer vir vaste grootte gesentreerde inhoud |
|
| w3 motor |
Houer vir responsiewe grootte-gesentreerde inhoud |
|
| w3-rek |
Klas wat regter- en linkerkantlyne verwyder (veral nuttig vir die rek van opgestopte rye (w3-ry-opvulling)) |
|
| Klas |
Definieer |
|
| w3-tafel |
Houer vir 'n HTML-tabel |
|
| w3-streep |
Gestreepte tafel |
|
| w3-grens |
Borderige tafel |
|
| w3-begrens |
Begrensde lyne |
|
| w3-gesentreerd |
Gesentreerde tafel |
|
| w3-sweefbaar |
Swaaibare tafel |
|
| w3-tabel-alles |
Alle eiendomme gestel |
|
| |
Met w3-streep, w3-grens en w3-grens |
|
| |
Met gekleurde kop |
|
| |
Met w3-reaksie |
|
| |
Met w3-klein |
|
| |
Met w3-klein |
|
| |
Met w3-groot |
|
| |
Met w3-xlarge |
|
| |
Met w3-xxlarge |
|
| |
Met w3-xxxlarge |
|
| |
Met kleur |
|
| |
Met w3-jumbo |
|
| w3-reageer |
Skep 'n responsiewe tabel |
|
| Klas |
Definieer |
|
| w3-kaart |
Dieselfde as w3-kaart-2 |
|
| w3-kaart-2 |
Houer vir enige HTML-inhoud (2px omringde skaduwee) |
|
| w3-kaart-4 |
Houer vir enige HTML-inhoud (4px omringde skaduwee) |
|
| Klas |
Definieer |
|
| w3-ry |
Houer vir een ry vloeistof-responsiewe inhoud |
|
| w3-ry-opvulling |
Ry waar alle kolomme 'n verstekvulling het |
|
| w3 motor |
Houer vir responsiewe grootte-gesentreerde inhoud |
|
| w3-rek |
Klas wat regter- en linkerkantlyne verwyder |
|
| w3-helfte |
Halwe (1/2) skermkolomhouer |
|
| w3-derde |
Derde (1/3) skermkolomhouer |
|
| w3-tweederde |
Twee derde (2/3) skermkolomhouer |
|
| w3-kwart |
Kwart (1/4) skermkolomhouer |
|
| w3-driekwart |
Driekwart (3/4) skermkolomhouer |
|
| w3-kol |
Kolomhouer vir enige HTML-inhoud |
|
| w3-rus |
Beslaan die res van die kolomwydte |
|
| |
|
|
| l1 - l12 |
Responsiewe groottes vir groot skerms |
|
| m1 - m12 |
Responsiewe groottes vir medium skerms |
|
| s1 - s12 |
Responsiewe groottes vir klein skerms |
|
| |
|
|
| w3-versteek-klein |
Versteek inhoud op klein skerms (minder as 601px) |
|
| w3-versteek-medium |
Versteek inhoud op medium skerms |
|
| w3-versteek-groot |
Versteek inhoud op groot skerms (groter as 992px) |
|
| |
|
|
| w3-beeld |
Responsiewe beeld |
|
| |
|
|
| w3-selfoon |
Voeg mobiele-eerste reaksie by enige element.
Vertoon elemente as blokelemente op mobiele toestelle. |
|
| Klas |
Definieer |
|
| w3-sel-ry |
Houer vir uitlegkolomme (selle). |
|
| w3-sel |
Uitlegkolom (sel). |
|
| w3-sel-top |
Belyn inhoud aan die bokant van 'n kolom (sel). |
|
| w3-sel-middel |
Belyn inhoud by die vertikale middel van 'n kolom (sel). |
|
| w3-sel-onderkant |
Belyn inhoud onderaan 'n kolom (sel). |
|
| Klas |
Definieer |
|
| w3-maat |
Horisontale balk |
|
| w3-staaf-blok |
Vertikale staaf |
|
| w3-staaf-item |
Bied algemene styl vir kroegitems |
|
| w3-sybalk |
Systaaf |
|
| |
'n Sybalk kan alle soorte inhoud bevat |
|
| |
'n Sybalk wat hoofinhoud oorlê |
|
| |
'n Sybalk wat alle hoofinhoud oorlê |
|
| |
'n Sybalk wat hoofinhoud na regs skuif |
|
| |
'n Sybalk met 'n oorleg agtergrond |
|
| |
'n Sybalk aan die regterkant |
|
| w3-ineenstorting |
Word saam met w3-sybalk gebruik om 'n volledig outomatiese responsiewe synavigasie te skep. Vir hierdie klas om te werk, moet die bladsy-inhoud binne 'n "w3-hoof"-klas wees |
|
| w3-hoof |
Houer vir bladsy-inhoud wanneer die w3-invou-klas gebruik word vir responsiewe synavigasies |
|
| |
Ten volle outomatiese regskant-responsiewe synavigasie |
|
| w3-dropdown-klik |
Klikbare aftrek-element |
|
| w3-aftreklys-sweef |
Beweegbare aftrek-element |
|
| |
Beweegbare aftrekelement (gebruik in w3-balk) |
|
| |
Beweegbare dropdown-element (gebruik in w3-bar-block) |
|
| |
Beweegbare aftrek-element (gebruik in w3-sybalk) |
|
| Klas |
Definieer |
|
| w3-knoppie |
Reghoekige knoppie met grys agtergrondkleur op beweeg |
|
| w3-btn |
Reghoekige knoppie met skaduwees op beweeg |
|
| w3-sirkel |
Kan gebruik word om 'n sirkelvormige knoppie te skep |
|
| w3-rimpel |
Reghoekige knoppie met rimpeleffek |
|
| |
Sirkelvormige drywende knoppie met rimpeleffek |
|
| w3-maat |
Kan gebruik word om elemente (soos knoppies) in 'n horisontale balk te groepeer |
|
| w3-blok |
Klas wat gebruik kan word om 'n volle breedte w3-knoppie te definieer |
|
| |
Volle breedte w3-btn |
|
| |
Volle breedte sirkelvormige knoppie |
|
| Klas |
Definieer |
|
| w3-invoer |
Invoer elemente |
|
| |
Voer vorm as 'n kaart in |
|
| |
Invoerelemente (top-etikette) |
|
| |
Invoerelemente (onderste etikette) |
|
| w3-kyk |
Merkblokkie invoer tipe |
|
| w3 radio |
Radio-invoertipe |
|
| w3-kies |
Invoer kies element |
|
| w3-animeer-invoer |
Animeer die breedte van 'n invoer tot 100% |
|
| Klas |
Definieer |
|
| w3-modaal |
Modale houer |
|
| w3-modale-inhoud |
Modale opspringelement |
|
| w3-nutspunt |
Tooltip-element |
|
| w3-teks |
Nutswenk teks |
|
| Klas |
Definieer |
|
| w3-animeer-top |
Animeer 'n element van bo -300px tot 0px |
|
| w3-animeer-links |
Animeer 'n element van links -300px tot 0px |
|
| w3-animeer-onder |
Animeer 'n element van onder -300px tot 0px |
|
| w3-animeer-regs |
Animeer 'n element van regs -300px tot 0px |
|
| w3-animeer-ondeursigtigheid |
Animeer 'n element se ondeursigtigheid van 0 tot 1 |
|
| w3-animeer-zoem |
Animeer 'n element van 0 tot 100% in grootte |
|
| w3-animeer-vervaag |
Animeer 'n element se ondeursigtigheid van 0 tot 1 en 1 tot 0 (vervaag in EN uit) |
|
| w3-spin |
Draai 'n ikoon 360 grade |
|
| |
Draai enige element 360 grade |
|
| w3-animeer-invoer |
Animeer die breedte van 'n invoerveld tot 100% |
|
| Klas |
Definieer |
|
| w3-klein |
Spesifiseer 'n lettergrootte van 10 pieksels |
|
| w3-klein |
Spesifiseer 'n lettergrootte van 12 pieksels |
|
| w3-groot |
Spesifiseer 'n lettergrootte van 18 pieksels |
|
| w3-xgroot |
Spesifiseer 'n lettergrootte van 24 pieksels |
|
| w3-xxgroot |
Spesifiseer 'n lettergrootte van 32 piksels |
|
| w3-xxxgroot |
Spesifiseer 'n lettergrootte van 48 pieksels |
|
| w3-jumbo |
Spesifiseer 'n lettergrootte van 64 piksels |
|
| w3-wyd |
Spesifiseer 'n wyer teks |
|
| w3-serif |
Verander die lettertipe na serif |
|
| w3-sans-serif |
Verander die lettertipe na sans-serif |
|
| w3-kursief |
Verander die lettertipe na kursief |
|
| w3-monoruimte |
Verander die font na monospace |
|
| Klas |
Definieer |
|
| w3-sentrum |
Gesentreerde inhoud |
|
| w3-links |
Sweef 'n element na links (dryf: links) |
|
| w3-regs |
Sweef 'n element na regs (dryf: regs) |
|
| w3-links-belyn |
Linksbelynde teks |
|
| w3-regs-belyn |
Regsbelynde teks |
|
| w3-regverdig |
Regs- en linksbelynde teks |
|
| w3-blok |
Klas wat gebruik kan word om 'n volle breedte vir enige element te definieer |
|
| w3-sirkel |
Omringde inhoud |
|
| w3-wegsteek |
Versteekte inhoud (vertoon:geen) |
|
| w3-wys |
Wys inhoud (vertoon:blok) |
|
| w3-wys-blok |
Alias van w3-show (display:block) |
|
| w3-wys-inlyn-blok |
Wys inhoud as inlynblok (vertoon:inlynblok) |
|
| w3-top |
Vaste inhoud boaan 'n bladsy |
|
| w3-onder |
Vaste inhoud onderaan 'n bladsy |
|
| w3-skerm-houer |
Houer vir w3-vertoon- klasse (posisie: relatief) |
|
| w3-skerm-bo-aan |
Vertoon inhoud in die boonste linkerhoek van die w3-skerm-houer |
|
| w3-skerm-boregs |
Vertoon inhoud in die regter boonste hoek van die w3-skerm-houer |
|
| w3-vertoon-links onder |
Vertoon inhoud in die onderste linkerhoek van die w3-skerm-houer |
|
| w3-vertoon-regs onder |
Vertoon inhoud in die onderste regterhoek van die w3-skerm-houer |
|
| w3-vertoning-links |
Vertoon inhoud aan die linkerkant (links in die middel) van die w3-skerm-houer |
|
| w3-vertoon-regs |
Vertoon inhoud aan die regterkant (middel regs) van die w3-skerm-houer |
|
| w3-vertoon-middel |
Vertoon inhoud in die middel (middel) van die w3-skerm-houer |
|
| w3-skerm-bo-middel |
Vertoon inhoud bo-middel van die w3-skerm-houer |
|
| w3-vertoon-onder middel |
Vertoon inhoud onder in die middel van die w3-skerm-houer |
|
| w3-vertoon-posisie |
Wys inhoud op 'n gespesifiseerde posisie in die w3-skermhouer |
|
| w3-vertoon-sweef |
Wys inhoud terwyl jy in die w3-skermhouer beweeg |
|
| Klas |
Definieer |
|
| w3-deursigtigheid |
Voeg ondeursigtigheid/deursigtigheid by 'n element (ondeursigtigheid: 0.6) |
|
| |
Voeg ondeursigtigheid/deursigtigheid by teks |
|
| w3-ondeursigtigheid-af |
Skakel ondeursigtigheid/deursigtigheid af (ondeursigtigheid: 1) |
|
| w3-deursigtigheid-min |
Voeg ondeursigtigheid/deursigtigheid by 'n element (ondeursigtigheid: 0,75) |
|
| w3-deursigtigheid-maks |
Voeg ondeursigtigheid/deursigtigheid by 'n element (ondeursigtigheid: 0.25) |
|
| w3-grysskaal-min |
Voeg 'n grysskaal-effek by 'n element (grysskaal: 50%) |
|
| w3-grysskaal |
Voeg 'n grysskaal-effek by 'n element (grysskaal: 75%) |
|
| w3-grysskaal-maks |
Voeg 'n grysskaal-effek by 'n element (grysskaal: 100%) |
|
| w3-sepia-min |
Voeg 'n sepia-effek by 'n element (sepia: 50%) |
|
| w3-sepia |
Voeg 'n sepia-effek by 'n element (sepia: 75%) |
|
| w3-sepia-maks |
Voeg 'n sepia-effek by 'n element (sepia: 100%) |
|
| w3-oorleg |
Skep 'n oorleg effek |
|
| Klas |
Definieer |
|
| w3-rooi |
Agtergrond kleur rooi |
|
| w3-pienk |
Agtergrond kleur pienk |
|
| w3-pers |
Agtergrondkleur pers |
|
| w3-diep-pers |
Agtergrondkleur diep pers |
|
| w3-indigo |
Agtergrondkleur indigo |
|
| w3-blou |
Agtergrond kleur blou |
|
| w3-ligblou |
Agtergrondkleur ligblou |
|
| w3-sian |
Agtergrondkleur siaan |
|
| w3-water |
Agtergrond kleur aqua |
|
| w3-teal |
Agtergrond kleur blauwgroen |
|
| w3-groen |
Agtergrond kleur groen |
|
| w3-liggroen |
Agtergrondkleur liggroen |
|
| w3-kalk |
Agtergrondkleur kalk |
|
| w3-sand |
Agtergrond kleur sand |
|
| w3-kakie |
Agtergrond kleur kakie |
|
| w3-geel |
Agtergrond kleur geel |
|
| w3-amber |
Agtergrond kleur amber |
|
| w3-oranje |
Agtergrond kleur oranje |
|
| w3-diep-oranje |
Agtergrondkleur diep oranje |
|
| w3-blou-grys |
Agtergrondkleur blougrys |
|
| w3-bruin |
Agtergrond kleur bruin |
|
| w3-liggrys |
Agtergrondkleur liggrys |
|
| w3-grys |
Agtergrondkleur grys |
|
| w3-donkergrys |
Agtergrondkleur donkergrys |
|
| w3-swart |
Agtergrond kleur swart |
|
| w3-bleekrooi |
Agtergrondkleur ligrooi |
|
| w3-bleekgeel |
Agtergrondkleur liggeel |
|
| w3-bleekgroen |
Agtergrondkleur liggroen |
|
| w3-bleekblou |
Agtergrondkleur ligblou |
|
| w3-deursigtig |
Deursigtige agtergrondkleur |
|
Beweeg Kleur Klasse
Die kleure hierbo kan ook as sweefklasse gebruik word:
| Klas |
Definieer |
|
| w3-sweef-wit |
Hover kleur wit |
|
| w3-sweef-swart |
Hover kleur swart |
|
| w3-sweef-rooi |
Beweeg kleur rooi |
|
| w3-sweef-blou |
Hover kleur blou |
|
| w3-sweef-groen |
Hover kleur groen |
|
| w3-sweef-aqua |
Hover kleur aqua |
|
| w3-sweef-oranje |
Beweeg kleur oranje |
|
| w3-sweef-grys |
Beweeg kleur grys |
|
| w3-sweef-bleekgroen |
Hover kleur liggroen |
|
| Klas |
Definieer |
|
| w3-teks-rooi |
Tekskleur rooi |
|
| w3-teks-groen |
Teks kleur groen |
|
| w3-teks-blou |
Tekskleur blou |
|
| w3-teks-geel |
Tekskleur geel |
|
| w3-teks-liggrys |
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 |
|
