W3.Odniesienie CSS
W3.Klasy CSS
| Klasa |
Definiuje |
|
| pojemnik w3 |
Kontener HTML z dopełnieniem 16px lewy i prawy |
|
| |
Używany jako nagłówek |
|
| |
Używany jako stopka |
|
| w3-panel |
Kontener HTML z dopełnieniem 16px lewy i prawy oraz 16px górny i dolny margines |
|
| |
Służy do wyświetlania notatki |
|
| |
Służy do wyświetlania cytatu |
|
| odznaka w3 |
Okrągła odznaka |
|
| w3 dzień |
Etykieta prostokątna |
|
| w3-ul |
Lista nieuporządkowana |
|
| w3-display-container |
Kontener na klasy w3-display- ( umożliwia pozycjonowanie elementów wewnątrz kontenera) |
|
| w3-blok |
Klasa, której można użyć do zdefiniowania pełnej szerokości dowolnego elementu |
|
| kod w3 |
Pojemnik na kod |
|
| w3-zakres kodu |
Kontener kodu wbudowanego (dla fragmentów kodu) |
|
| zawartość w3 |
Pojemnik na zawartość wyśrodkowaną o stałym rozmiarze |
|
| samochód w3 |
Kontener na responsywną zawartość o rozmiarze wyśrodkowanym |
|
| w3-rozciągliwy |
Klasa usuwająca prawy i lewy margines (szczególnie przydatna do rozciągania dopełnionych wierszy (w3-row-padding)) |
|
| Klasa |
Definiuje |
|
| w3-stół |
Kontener na tabelę HTML |
|
| w3 w paski |
Stół w paski |
|
| w3-granica |
Stół z obramowaniem |
|
| w3-obramowane |
Obramowane linie |
|
| skoncentrowany na w3 |
Wyśrodkowany stół |
|
| w3-unoszący się |
Unoszący się stół |
|
| w3-stół-wszystko |
Zestaw wszystkich właściwości |
|
| |
Z obramowaniem w3, obramowaniem w3 i obramowaniem w3 |
|
| |
Z kolorową głową |
|
| |
Z responsywnością w3 |
|
| |
Z w3-malutkim |
|
| |
Z w3-małym |
|
| |
Z w3-dużym |
|
| |
Z w3-xlarge |
|
| |
Z w3-xxlarge |
|
| |
Z w3-xxxlarge |
|
| |
Z kolorem |
|
| |
Z w3-jumbo |
|
| w3 odpowiada |
Tworzy responsywną tabelę |
|
| Klasa |
Definiuje |
|
| w3-karta |
Tak samo jak w3-card-2 |
|
| w3-karta-2 |
Kontener na dowolną zawartość HTML (2px cień z obramowaniem) |
|
| w3-karta-4 |
Pojemnik na dowolną zawartość HTML (cień z 4 pikselami) |
|
| Klasa |
Definiuje |
|
| w3-wiersz |
Pojemnik na jeden rząd treści responsywnych na płyn |
|
| w3-wiersz-wypełnienie |
Wiersz, w którym wszystkie kolumny mają domyślne wypełnienie |
|
| samochód w3 |
Kontener na responsywną zawartość o rozmiarze wyśrodkowanym |
|
| w3-rozciągliwy |
Klasa usuwająca prawy i lewy margines |
|
| w3-połowa |
Pojemnik na pół (1/2) ekranu kolumny |
|
| w3-trzeci |
Kontener trzeciej kolumny (1/3) ekranu |
|
| w3-dwie trzecie |
Pojemnik na dwie trzecie (2/3) kolumny ekranu |
|
| w3 kwartał |
Kontener kolumny ćwiartkowej (1/4) ekranu |
|
| w3-trzy czwarte |
Pojemnik na trzy czwarte (3/4) kolumny ekranu |
|
| w3-kolor |
Kontener kolumn dla dowolnej zawartości HTML |
|
| w3-odpoczynek |
Zajmuje resztę szerokości kolumny |
|
| |
|
|
| l1 - l12 |
Responsywne rozmiary dla dużych ekranów |
|
| m1 - m12 |
Responsywne rozmiary dla średnich ekranów |
|
| s1 - s12 |
Responsywne rozmiary dla małych ekranów |
|
| |
|
|
| w3-ukryj-mały |
Ukryj zawartość na małych ekranach (mniej niż 601px) |
|
| w3-ukryj-średni |
Ukryj zawartość na średnich ekranach |
|
| w3-ukryj-duży |
Ukryj zawartość na dużych ekranach (większych niż 992px) |
|
| |
|
|
| w3 obraz |
Responsywny obraz |
|
| |
|
|
| w3-mobilny |
Dodaje responsywność zorientowaną na urządzenia mobilne do dowolnego elementu.
Wyświetla elementy jako elementy blokowe na urządzeniach mobilnych. |
|
| Klasa |
Definiuje |
|
| w3-wiersz komórek |
Kontener na kolumny układu (komórki). |
|
| w3-komórka |
Kolumna układu (komórka). |
|
| w3-komórka-góra |
Wyrównuje zawartość u góry kolumny (komórki). |
|
| w3-komórka-środek |
Wyrównuje zawartość do pionowego środka kolumny (komórki). |
|
| w3-komórka-dno |
Wyrównuje zawartość na dole kolumny (komórki). |
|
| Klasa |
Definiuje |
|
| w3-bar |
Pasek poziomy |
|
| w3-bar-blok |
Pionowy pasek |
|
| w3-bar-element |
Zapewnia wspólny styl dla artykułów barowych |
|
| w3 pasek boczny |
Pasek boczny |
|
| |
Pasek boczny może zawierać wszystkie rodzaje treści |
|
| |
Pasek boczny nakładający się na główną treść |
|
| |
Pasek boczny nakładający się na całą główną zawartość |
|
| |
Pasek boczny przesuwający główną treść w prawo |
|
| |
Pasek boczny z nakładką w tle |
|
| |
Pasek boczny po prawej stronie |
|
| w3-zwiń |
Używany razem z paskiem bocznym w3 do tworzenia w pełni automatycznej, responsywnej nawigacji bocznej. Aby ta klasa działała, zawartość strony musi znajdować się w klasie „w3-main” |
|
| w3-główny |
Pojemnik na zawartość strony podczas korzystania z klasy w3-collapse do elastycznej nawigacji bocznej |
|
| |
W pełni automatyczna, responsywna nawigacja po prawej stronie |
|
| w3-menu-kliknij |
Klikalny element rozwijany |
|
| w3-menu rozwijane |
Unoszący się element rozwijany |
|
| |
Hoverable dropdown element (używany w w3-bar) |
|
| |
Hoverable dropdown element (używany w w3-bar-block) |
|
| |
Hoverable dropdown element (używany w pasku bocznym w3) |
|
| Klasa |
Definiuje |
|
| przycisk w3 |
Prostokątny przycisk z szarym kolorem tła po najechaniu myszą |
|
| w3-btn |
Prostokątny przycisk z cieniami po najechaniu kursorem |
|
| w3-koło |
Może służyć do tworzenia okrągłego przycisku |
|
| w3-marszczyć |
Prostokątny przycisk z efektem tętnienia |
|
| |
Okrągły pływający przycisk z efektem tętnienia |
|
| w3-bar |
Może służyć do grupowania elementów (takich jak przyciski) na poziomym pasku |
|
| w3-blok |
Klasa, której można użyć do zdefiniowania przycisku w3 o pełnej szerokości |
|
| |
Pełna szerokość w3-btn |
|
| |
Okrągły przycisk o pełnej szerokości |
|
| Klasa |
Definiuje |
|
| wejście w3 |
Elementy wejściowe |
|
| |
Formularz wejściowy jako karta |
|
| |
Elementy wejściowe (górne etykiety) |
|
| |
Elementy wejściowe (dolne etykiety) |
|
| w3-sprawdź |
Typ wejścia pola wyboru |
|
| w3 radio |
Typ wejścia radiowego |
|
| w3-wybierz |
Wejście wybierz element |
|
| w3-animuj-wejście |
Animuje szerokość danych wejściowych do 100% |
|
| Klasa |
Definiuje |
|
| w3-modalny |
Kontener modalny |
|
| w3-modal-treść |
Wyskakujący element modalny |
|
| podpowiedź w3 |
Element podpowiedzi |
|
| w3-tekst |
Tekst podpowiedzi |
|
| Klasa |
Definiuje |
|
| w3-animuj-top |
Animuje element od góry -300px do 0px |
|
| w3-animuj-lewo |
Animuje element od lewej -300px do 0px |
|
| w3-animuj-dół |
Animuje element od dołu -300px do 0px |
|
| w3-animuj-prawo |
Animuje element od prawej -300px do 0px |
|
| w3-ożywianie-przezroczystość |
Animuje krycie elementu od 0 do 1 |
|
| w3-animuj-zoom |
Animuje element od 0 do 100% rozmiaru |
|
| w3-animacja-blaknięcie |
Animuje krycie elementu od 0 do 1 i od 1 do 0 (zanika i zanika) |
|
| w3-spin |
Obróć ikonę o 360 stopni |
|
| |
Obróć dowolny element o 360 stopni |
|
| w3-animuj-wejście |
Animuje szerokość pola wejściowego do 100% |
|
| Klasa |
Definiuje |
|
| w3-malutki |
Określa rozmiar czcionki 10 pikseli |
|
| w3-małe |
Określa rozmiar czcionki 12 pikseli |
|
| w3-duży |
Określa rozmiar czcionki 18 pikseli |
|
| w3-xduże |
Określa rozmiar czcionki 24 piksele |
|
| w3-xxlarge |
Określa rozmiar czcionki 32 piksele |
|
| w3-xxxduża |
Określa rozmiar czcionki 48 pikseli |
|
| w3-jumbo |
Określa rozmiar czcionki 64 pikseli |
|
| w3-szeroki |
Określa szerszy tekst |
|
| w3-szeryfowe |
Zmienia czcionkę na szeryfową |
|
| w3-bezszeryfowy |
Zmienia czcionkę na bezszeryfową |
|
| w3-kursywny |
Zmienia czcionkę na kursywą |
|
| w3-monoprzestrzeń |
Zmienia czcionkę na monospace |
|
| Klasa |
Definiuje |
|
| w3-centrum |
Wyśrodkowana treść |
|
| w3-po lewej |
Unosi element w lewo (float: left) |
|
| w3-prawo |
Unosi element w prawo (float: right) |
|
| w3-wyrównaj do lewej |
Tekst wyrównany do lewej |
|
| w3-wyrównaj do prawej |
Tekst wyrównany do prawej |
|
| w3-uzasadnij |
Tekst wyrównany do prawej i lewej |
|
| w3-blok |
Klasa, której można użyć do zdefiniowania pełnej szerokości dowolnego elementu |
|
| w3-koło |
Treść w kółku |
|
| w3-ukryj |
Treść ukryta (wyświetlanie: brak) |
|
| w3-pokaż |
Pokaż zawartość (wyświetlanie:blok) |
|
| w3-pokaż-blok |
Alias w3 show (display:block) |
|
| w3-show-inline-block |
Pokaż zawartość jako inline-block (display:inline-block) |
|
| w3-góra |
Naprawiono treść na górze strony |
|
| w3-dół |
Naprawiono treść na dole strony |
|
| w3-display-container |
Kontener na klasy w3-display- ( pozycja: względna) |
|
| w3-display-topleft |
Wyświetla zawartość w lewym górnym rogu w3-display-container |
|
| w3-wyświetlacz na górze po prawej |
Wyświetla zawartość w prawym górnym rogu w3-display-container |
|
| w3-wyświetlacz-dolny lewy |
Wyświetla zawartość w lewym dolnym rogu w3-display-container |
|
| w3-display-bottomright |
Wyświetla zawartość w prawym dolnym rogu w3-display-container |
|
| w3-wyświetlacz-po lewej |
Wyświetla zawartość po lewej stronie (w środku po lewej) od w3-display-container |
|
| w3-wyświetlacz-prawo |
Wyświetla zawartość po prawej (w środku po prawej) od w3-display-container |
|
| w3-wyświetlacz-środek |
Wyświetla zawartość w środku (w środku) w3-display-container |
|
| w3-display-topmiddle |
Wyświetla zawartość w górnej środkowej części kontenera wyświetlacza w3 |
|
| w3-wyświetlacz-dolny środek |
Wyświetla zawartość w dolnej środkowej części w3-display-container |
|
| w3-pozycja wyświetlacza |
Wyświetla zawartość w określonej pozycji w w3-display-container |
|
| w3-display-hover |
Wyświetla zawartość po najechaniu myszą wewnątrz w3-display-container |
|
| Klasa |
Definiuje |
|
| w3-przezroczystość |
Dodaje krycie/przezroczystość do elementu (nieprzezroczystość: 0,6) |
|
| |
Dodaj krycie/przezroczystość do tekstu |
|
| w3-nieprzezroczystość |
Wyłącza krycie/przezroczystość (nieprzezroczystość: 1) |
|
| w3-przezroczystość-min |
Dodaje krycie/przezroczystość do elementu (nieprzezroczystość: 0,75) |
|
| w3-przezroczystość-maks. |
Dodaje krycie/przezroczystość do elementu (nieprzezroczystość: 0,25) |
|
| w3-skala szarości-min |
Dodaje efekt skali szarości do elementu (skala szarości: 50%) |
|
| w3-skala szarości |
Dodaje efekt skali szarości do elementu (skala szarości: 75%) |
|
| w3-skala szarości-max |
Dodaje efekt skali szarości do elementu (skala szarości: 100%) |
|
| w3-sepia-min |
Dodaje efekt sepii do elementu (sepia: 50%) |
|
| w3-sepia |
Dodaje efekt sepii do elementu (sepia: 75%) |
|
| w3-sepia-maks. |
Dodaje efekt sepii do elementu (sepia: 100%) |
|
| nakładka w3 |
Tworzy efekt nakładki |
|
| Klasa |
Definiuje |
|
| w3-czerwony |
Kolor tła czerwony |
|
| w3-różowy |
Kolor tła różowy |
|
| w3-fioletowy |
Kolor tła fioletowy |
|
| w3-ciemnofioletowy |
Kolor tła ciemnofioletowy |
|
| w3-indygo |
Kolor tła indygo |
|
| w3-niebieski |
Kolor tła niebieski |
|
| w3-jasnoniebieski |
Kolor tła jasnoniebieski |
|
| w3-cyjan |
Kolor tła cyjan |
|
| w3-wodny |
Kolor tła wodny |
|
| w3-cyraneczka |
Turkusowy kolor tła |
|
| w3-zielony |
Kolor tła zielony |
|
| w3-jasnozielony |
Kolor tła jasnozielony |
|
| w3-limonkowy |
Limonkowy kolor tła |
|
| w3-piasek |
Piaskowy kolor tła |
|
| w3-khaki |
Kolor tła khaki |
|
| w3-żółty |
Kolor tła żółty |
|
| w3-bursztynowy |
Bursztynowy kolor tła |
|
| w3-pomarańczowy |
Kolor tła pomarańczowy |
|
| w3-ciemnopomarańczowy |
Kolor tła ciemnopomarańczowy |
|
| w3-niebiesko-szary |
Kolor tła niebieski szary |
|
| w3-brązowy |
Kolor tła brązowy |
|
| w3-jasnoszary |
Kolor tła jasnoszary |
|
| w3-szary |
Kolor tła szary |
|
| w3-ciemno-szary |
Kolor tła ciemnoszary |
|
| w3-czarny |
Kolor tła czarny |
|
| w3-blado-czerwony |
Kolor tła jasnoczerwony |
|
| w3-blado-żółty |
Kolor tła jasnożółty |
|
| w3-blado-zielony |
Kolor tła jasnozielony |
|
| w3-bladoniebieski |
Kolor tła jasnoniebieski |
|
| w3-przezroczysty |
Przezroczysty kolor tła |
|
Klasy kolorów po najechaniu kursorem
Powyższe kolory mogą być również używane jako klasy najechania:
| Klasa |
Definiuje |
|
| w3-unoszący się-biały |
Wskaż kolor biały |
|
| w3-nawiedzony-czarny |
Unieś kolor czarny |
|
| w3-najechanie-czerwony |
Kolor wskaźnika myszy czerwony |
|
| w3-nawiesić-niebieski |
Kolor wskaźnika na niebiesko |
|
| w3-unoszący się-zielony |
Kolor wskaźnika na zielono |
|
| w3-hover-aqua |
Najedź na kolor aqua |
|
| w3-unosi się pomarańczowy |
Najedź na kolor pomarańczowy |
|
| w3-unosi się-szary |
Umieść wskaźnik na szarym kolorze |
|
| w3-hover-blado-zielony |
Kolor bladozielony |
|
| Klasa |
Definiuje |
|
| w3-tekst-czerwony |
Kolor tekstu czerwony |
|
| w3-tekst-zielony |
Kolor tekstu zielony |
|
| w3-tekst-niebieski |
Kolor tekstu niebieski |
|
| w3-tekst-żółty |
Kolor tekstu żółty |
|
| w3-tekst-jasnoszary |
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 |
|
