Odkaz na W3.CSS
Třídy W3.CSS
| Třída |
Definuje |
|
| w3-kontejner |
HTML kontejner s 16px levým a pravým odsazením |
|
| |
Používá se jako záhlaví |
|
| |
Používá se jako zápatí |
|
| w3-panel |
HTML kontejner s 16px levým a pravým odsazením a 16px horním a spodním okrajem |
|
| |
Slouží k zobrazení poznámky |
|
| |
Slouží k zobrazení nabídky |
|
| w3-odznak |
Kruhový odznak |
|
| w3 den |
Obdélníkový štítek |
|
| w3-ul |
Neuspořádaný seznam |
|
| w3-display-container |
Kontejner pro třídy w3-display- (umožňuje umístění prvků uvnitř kontejneru) |
|
| w3-blok |
Třída, kterou lze použít k definování plné šířky libovolného prvku |
|
| w3-kód |
Zásobník kódu |
|
| w3-codespan |
Vložený kontejner kódu (pro úryvky kódu) |
|
| w3-obsah |
Kontejner pro obsah s pevnou velikostí uprostřed |
|
| auto w3 |
Kontejner pro responzivní obsah zaměřený na velikost |
|
| w3-stretch |
Třída, která odstraňuje pravý a levý okraj (obzvláště užitečné pro roztažení vycpaných řádků (w3-row-padding)) |
|
| Třída |
Definuje |
|
| w3-tabulka |
Kontejner pro HTML tabulku |
|
| w3-pruhované |
Pruhovaný stůl |
|
| w3-hranice |
Ohraničený stůl |
|
| w3-ohraničený |
Ohraničené čáry |
|
| w3-střed |
Středový stůl |
|
| w3-hoverable |
Posuvný stůl |
|
| w3-table-all |
Všechny vlastnosti nastaveny |
|
| |
S pruhy w3, s ohraničením w3 a s ohraničením w3 |
|
| |
S barevnou hlavou |
|
| |
S w3-responzivním |
|
| |
S w3-tiny |
|
| |
S w3-small |
|
| |
S w3-large |
|
| |
S w3-xlarge |
|
| |
S w3-xxlarge |
|
| |
S w3-xxxlarge |
|
| |
S barvou |
|
| |
S w3-jumbo |
|
| w3-responzivní |
Vytvoří responzivní tabulku |
|
| Třída |
Definuje |
|
| karta w3 |
Stejné jako w3-card-2 |
|
| w3-card-2 |
Kontejner pro jakýkoli obsah HTML (2px ohraničený stín) |
|
| w3-card-4 |
Kontejner pro jakýkoli obsah HTML (ohraničený stín 4px) |
|
| Třída |
Definuje |
|
| w3-řádek |
Zásobník pro jeden řádek obsahu reagujícího na tekutiny |
|
| w3-row-padding |
Řádek, kde mají všechny sloupce výchozí odsazení |
|
| auto w3 |
Kontejner pro responzivní obsah zaměřený na velikost |
|
| w3-stretch |
Třída, která odstraňuje pravý a levý okraj |
|
| w3-polovina |
Poloviční (1/2) sítový sloupcový kontejner |
|
| w3-třetina |
Třetí (1/3) sítový sloupcový kontejner |
|
| w3-dvatřetina |
Dvoutřetinový (2/3) sítový sloupcový kontejner |
|
| w3-čtvrtletí |
Sloupový kontejner se čtvrtým (1/4) sítem |
|
| w3-třičtvrteční |
Tříčtvrtinový (3/4) sítový sloupcový kontejner |
|
| w3-col |
Kontejner sloupců pro jakýkoli obsah HTML |
|
| w3-rest |
Zabírá zbytek šířky sloupce |
|
| |
|
|
| l1 - l12 |
Responzivní velikosti pro velké obrazovky |
|
| m1 - m12 |
Responzivní velikosti pro střední obrazovky |
|
| s1 - s12 |
Responzivní velikosti pro malé obrazovky |
|
| |
|
|
| w3-hide-small |
Skrýt obsah na malých obrazovkách (méně než 601 pixelů) |
|
| w3-hide-medium |
Skrýt obsah na středních obrazovkách |
|
| w3-hide-large |
Skrýt obsah na velkých obrazovkách (větších než 992 pixelů) |
|
| |
|
|
| w3-image |
Responzivní obrázek |
|
| |
|
|
| w3-mobile |
Dodává jakémukoli prvku odezvu na prvním místě pro mobily.
Zobrazuje prvky jako blokové prvky na mobilních zařízeních. |
|
| Třída |
Definuje |
|
| w3-řada buněk |
Kontejner pro rozložení sloupců (buňek). |
|
| w3-buňka |
Sloupec rozložení (buňka). |
|
| w3-cell-top |
Zarovná obsah na začátek sloupce (buňky). |
|
| w3-cell-middle |
Zarovná obsah na svislý střed sloupce (buňky). |
|
| w3-cell-bottom |
Zarovná obsah na konec sloupce (buňky). |
|
| Třída |
Definuje |
|
| w3-bar |
Hrazda |
|
| w3-bar-blok |
Vertikální pruh |
|
| w3-bar-item |
Poskytuje společný styl pro barové položky |
|
| w3-sidebar |
Boční lišta |
|
| |
Boční panel může obsahovat všechny typy obsahu |
|
| |
Postranní lišta překrývající hlavní obsah |
|
| |
Postranní lišta překrývající veškerý hlavní obsah |
|
| |
Postranní lišta posouvající hlavní obsah doprava |
|
| |
Boční lišta s překryvným pozadím |
|
| |
A Boční lišta na pravé straně |
|
| w3-kolaps |
Používá se spolu s w3-sidebar k vytvoření plně automatické responzivní boční navigace. Aby tato třída fungovala, obsah stránky musí být v rámci třídy "w3-main". |
|
| w3-main |
Kontejner pro obsah stránky při použití třídy w3-collapse pro responzivní boční navigace |
|
| |
Plně automatická pravostranná responzivní boční navigace |
|
| w3-dropdown-click |
Rozbalovací prvek, na který lze kliknout |
|
| w3-dropdown-hover |
Pohyblivý rozevírací prvek |
|
| |
Pohyblivý rozevírací prvek (používá se ve w3-bar) |
|
| |
Pohyblivý rozevírací prvek (používá se v bloku w3-bar-block) |
|
| |
Pohyblivý rozevírací prvek (používá se v postranním panelu w3) |
|
| Třída |
Definuje |
|
| w3-tlačítko |
Obdélníkové tlačítko s šedou barvou pozadí na ukazateli myši |
|
| w3-btn |
Obdélníkové tlačítko se stíny na přechodu |
|
| w3-kruh |
Lze použít k vytvoření kruhového tlačítka |
|
| w3-ripple |
Obdélníkové tlačítko s vlnitým efektem |
|
| |
Kruhové plovoucí tlačítko s efektem zvlnění |
|
| w3-bar |
Lze použít k seskupení prvků (jako jsou tlačítka) do vodorovného pruhu |
|
| w3-blok |
Třída, kterou lze použít k definování plné šířky tlačítka w3 |
|
| |
Plná šířka w3-btn |
|
| |
Kruhové tlačítko po celé šířce |
|
| Třída |
Definuje |
|
| w3-vstup |
Vstupní prvky |
|
| |
Vstupní formulář jako karta |
|
| |
Vstupní prvky (horní štítky) |
|
| |
Vstupní prvky (spodní štítky) |
|
| w3-check |
Typ vstupu zaškrtávacího pole |
|
| rádio w3 |
Typ rádiového vstupu |
|
| w3-select |
Zadejte prvek výběru |
|
| w3-animate-input |
Animuje šířku vstupu na 100 % |
|
| Třída |
Definuje |
|
| w3-modální |
Modální kontejner |
|
| w3-modal-content |
Modální vyskakovací prvek |
|
| w3-tooltip |
Prvek popisku |
|
| w3-text |
Text popisku |
|
| Třída |
Definuje |
|
| w3-animate-top |
Animuje prvek shora -300px až 0px |
|
| w3-animate-left |
Animuje prvek zleva -300px na 0px |
|
| w3-animate-bottom |
Animuje prvek zdola -300px až 0px |
|
| w3-animate-right |
Animuje prvek zprava -300px na 0px |
|
| w3-animate-opacity |
Animuje neprůhlednost prvku od 0 do 1 |
|
| w3-animate-zoom |
Animuje prvek velikosti od 0 do 100 %. |
|
| w3-animate-fading |
Animuje neprůhlednost prvku od 0 do 1 a od 1 do 0 (zaniká AND) |
|
| w3-spin |
Otočte ikonu o 360 stupňů |
|
| |
Otočte libovolný prvek o 360 stupňů |
|
| w3-animate-input |
Animuje šířku vstupního pole na 100 % |
|
| Třída |
Definuje |
|
| w3-maličký |
Určuje velikost písma 10 pixelů |
|
| w3-malý |
Určuje velikost písma 12 pixelů |
|
| w3-velký |
Určuje velikost písma 18 pixelů |
|
| w3-xlarge |
Určuje velikost písma 24 pixelů |
|
| w3-xxlarge |
Určuje velikost písma 32 pixelů |
|
| w3-xxxlarge |
Určuje velikost písma 48 pixelů |
|
| w3-jumbo |
Určuje velikost písma 64 pixelů |
|
| w3-široký |
Určuje širší text |
|
| w3-serif |
Změní písmo na patkové |
|
| w3-sans-serif |
Změní písmo na bezpatkové |
|
| w3-kurziva |
Změní písmo na kurzívní |
|
| w3-monoprostor |
Změní písmo na jednoprostorové |
|
| Třída |
Definuje |
|
| w3-centrum |
Vycentrovaný obsah |
|
| w3-vlevo |
Pohybuje prvek doleva (plovoucí: vlevo) |
|
| w3-vpravo |
Pohybuje prvek doprava (plovoucí: vpravo) |
|
| w3-left-align |
Text zarovnaný doleva |
|
| w3-right-align |
Text zarovnaný vpravo |
|
| w3-zarovnat |
Text zarovnaný vpravo a vlevo |
|
| w3-blok |
Třída, kterou lze použít k definování plné šířky libovolného prvku |
|
| w3-kruh |
Obsah v kroužku |
|
| w3-skrýt |
Skrytý obsah (zobrazení: žádné) |
|
| w3-show |
Zobrazit obsah (zobrazit:blok) |
|
| w3-show-block |
Alias w3-show (display:block) |
|
| w3-show-inline-block |
Zobrazit obsah jako inline-block (display:inline-block) |
|
| w3-top |
Opravený obsah v horní části stránky |
|
| w3-dole |
Opravený obsah ve spodní části stránky |
|
| w3-display-container |
Kontejner pro třídy w3-display- (pozice: relativní) |
|
| w3-display-topleft |
Zobrazí obsah v levém horním rohu w3-display-container |
|
| w3-display-topright |
Zobrazí obsah v pravém horním rohu w3-display-container |
|
| w3-display-bottomleft |
Zobrazí obsah v levém dolním rohu w3-display-container |
|
| w3-display-bottomright |
Zobrazí obsah v pravém dolním rohu w3-display-container |
|
| w3-display-left |
Zobrazí obsah vlevo (uprostřed vlevo) od w3-display-container |
|
| w3-display-right |
Zobrazí obsah napravo (vpravo uprostřed) od w3-display-container |
|
| w3-display-middle |
Zobrazí obsah uprostřed (uprostřed) w3-display-container |
|
| w3-display-topmiddle |
Zobrazí obsah uprostřed nahoře w3-display-container |
|
| w3-display-bottommiddle |
Zobrazí obsah ve spodní části kontejneru w3-display-container |
|
| w3-display-position |
Zobrazí obsah na určeném místě v kontejneru w3-display-container |
|
| w3-display-hover |
Zobrazí obsah při umístění kurzoru uvnitř w3-display-container |
|
| Třída |
Definuje |
|
| w3-opacity |
Přidá neprůhlednost/průhlednost prvku (neprůhlednost: 0,6) |
|
| |
Přidejte neprůhlednost/průhlednost textu |
|
| w3-opacity-off |
Vypne neprůhlednost/průhlednost (neprůhlednost: 1) |
|
| w3-opacity-min |
Přidá neprůhlednost/průhlednost prvku (neprůhlednost: 0,75) |
|
| w3-opacity-max |
Přidá neprůhlednost/průhlednost prvku (neprůhlednost: 0,25) |
|
| w3-stupně šedi-min |
Přidá k prvku efekt stupňů šedi (stupně šedi: 50 %) |
|
| w3 ve stupních šedi |
Přidá prvku efekt stupňů šedi (stupně šedi: 75 %) |
|
| w3-stupně šedi-max |
Přidá k prvku efekt stupňů šedi (stupně šedi: 100 %) |
|
| w3-sépie-min |
Přidá prvku sépiový efekt (sépie: 50 %) |
|
| w3-sépie |
Přidá prvku sépiový efekt (sépie: 75 %) |
|
| w3-sépie-max |
Přidá prvku sépiový efekt (sépie: 100 %) |
|
| w3-overlay |
Vytváří efekt překrytí |
|
| Třída |
Definuje |
|
| w3-červená |
Barva pozadí červená |
|
| w3-růžová |
Barva pozadí růžová |
|
| w3-fialová |
Barva pozadí fialová |
|
| w3-deep-purple |
Barva pozadí tmavě fialová |
|
| w3-indigo |
Barva pozadí indigo |
|
| w3-modrá |
Barva pozadí modrá |
|
| w3-světle modrá |
Barva pozadí světle modrá |
|
| w3-azurová |
Barva pozadí azurová |
|
| w3-aqua |
Barva pozadí aqua |
|
| w3-teal |
Barva pozadí modrozelená |
|
| w3-zelená |
Barva pozadí zelená |
|
| w3-světle-zelená |
Barva pozadí světle zelená |
|
| w3-vápno |
Barva pozadí limetková |
|
| w3-písek |
Barva pozadí písek |
|
| w3-khaki |
Barva pozadí khaki |
|
| w3-žlutá |
Barva pozadí žlutá |
|
| w3-jantarová |
Barva pozadí jantarová |
|
| w3-oranžová |
Barva pozadí oranžová |
|
| w3-hluboce oranžová |
Barva pozadí tmavě oranžová |
|
| w3-modro-šedá |
Barva pozadí modrá šedá |
|
| w3-hnědá |
Barva pozadí hnědá |
|
| w3-světle šedá |
Barva pozadí světle šedá |
|
| w3-šedá |
Barva pozadí šedá |
|
| w3-tmavě šedá |
Barva pozadí tmavě šedá |
|
| w3-černá |
Barva pozadí černá |
|
| w3-bledě-červená |
Barva pozadí světle červená |
|
| w3-bledě-žlutá |
Barva pozadí světle žlutá |
|
| w3-bledě-zelená |
Barva pozadí světle zelená |
|
| w3-bledě-modrá |
Barva pozadí světle modrá |
|
| w3-transparentní |
Průhledná barva pozadí |
|
Třídy barev vznášedla
Výše uvedené barvy lze také použít jako třídy vznesení:
| Třída |
Definuje |
|
| w3-hover-white |
Barva přechodu bílá |
|
| w3-hover-black |
Barva přechodu černá |
|
| w3-hover-red |
Barva kurzoru červená |
|
| w3-hover-blue |
Barva přechodu modrá |
|
| w3-hover-green |
Barva ukazatele myši zelená |
|
| w3-hover-aqua |
Vznášející se barva aqua |
|
| w3-hover-oranžová |
Vznášející se barva oranžová |
|
| w3-hover-grey |
Barva přechodu šedá |
|
| w3-hover-bledo-green |
Barva vznášení světle zelená |
|
| Třída |
Definuje |
|
| w3-text-red |
Barva textu červená |
|
| w3-text-zelená |
Barva textu zelená |
|
| w3-text-blue |
Barva textu modrá |
|
| w3-text-žlutý |
Barva textu žlutá |
|
| w3-text-světle-šedá |
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 |
|
