W3.CSS Intro (zlew kuchenny)
W3.CSS Kolory
Klasy kolorów w3 są inspirowane nowoczesnymi kolorami używanymi w marketingu, znakach drogowych i karteczkach samoprzylepnych:
W3.CSS Kontenery
Klasa kontenera w3 jest najważniejszą z klas W3.CSS. Zapewnia równość, taką jak:
- Wspólne marże
- Wspólne wyściółki
- Typowe wyrównania w pionie
- Typowe wyrównania poziome
- Popularne czcionki
- Wspólne kolory
Klasa w3-container jest zwykle używana z elementami kontenera HTML, takimi jak:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> i inne.
To jest nagłówek
Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy.
To jest stopka.
W3.CSS Panele, notatki i cytaty
Klasa w3-panel może wyświetlać wszelkiego rodzaju notatki i cytaty:
Londyn to najbardziej zaludnione miasto w Wielkiej Brytanii, z obszarem metropolitalnym liczącym ponad 9 milionów mieszkańców.
Londyn to najbardziej zaludnione miasto w Wielkiej Brytanii, z obszarem metropolitalnym liczącym ponad 9 milionów mieszkańców.
Alerty W3.CSS
Klasa w3-panel może być również używana do wszystkich rodzajów alertów:
Niebezpieczeństwo!
Kolor czerwony często wskazuje na niebezpieczną lub negatywną sytuację.
Ostrzeżenie!
Żółty często oznacza ostrzeżenie, które może wymagać uwagi.
Powodzenie!
Zielony często oznacza coś udanego lub pozytywnego.
Informacje!
Niebieski często oznacza neutralną zmianę informacyjną lub działanie.
Przykład
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.Karty CSS
Klasy kart w3 są odpowiednie zarówno dla obrazów, jak i notatek:
Samochód
Samochód to kołowy pojazd silnikowy z własnym napędem używany do transportu. Większość definicji tego terminu określa, że samochody są zaprojektowane do jazdy głównie po drogach, mają siedzenia dla jednej do ośmiu osób i zazwyczaj mają cztery koła.
(Wikipedia)
Zdumiewający
francuskie Alpy
Przykład
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.Tabele CSS
Klasy w3-table mogą obsługiwać wszystkie rodzaje tabel:
| Imię | Nazwisko | Zwrotnica |
|---|---|---|
| Jill | Kowal | 50 |
| przeddzień | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Nudziarz | 100 |
Przykład
<table class="w3-table w3-striped w3-border">
W3.Listy CSS
Klasa w3-ul może obsługiwać wszystkie rodzaje list:
-
Mike
Web Designer -
Wsparcie Jill
-
Jane
Księgowa -
Jack
Doradca
Przykład
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.Przyciski CSS
Klasa w3-button i w3-btn udostępnia przyciski wszystkich rozmiarów i typów.
Szerokie przyciski:
Przyciski okrągłe lub kwadratowe:
W3.CSS Tagi, etykiety, odznaki i znaki
Klasy w3-tag i w3-badge mogą wyświetlać wszystkie rodzaje tagów, etykiet, odznak i znaków:
2 8 A b
Nowy Ostrzeżenie Niebezpieczeństwo Informacje
ODDYCHAJ
POD WODĄ
W3.CSS Responsywne
Klasy Responsive Grid zapewniają responsywność dla wszystkich typów urządzeń: PC, laptop, tablet i telefon komórkowy.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
odpoczynek
1/4
odpoczynek
100px
45px
odpoczynek
W3.CSS obsługuje również 12-kolumnową, mobilną, pierwszą siatkę płynów z klasami małymi, średnimi i dużymi.
W3.CSS Wyświetlacz
Klasy displayowe w3 pozwalają wyświetlać elementy HTML w określonych pozycjach:
W3.Modele CSS
Klasa w3-modal zapewnia modalne okno dialogowe w czystym HTML:
Obraz modalny:
W3. Paski postępu CSS
Przeczytaj więcej na Paski postępu W3.CSS
W3.CSS rozwijane
Klasy rozwijane w3 zapewniają listy rozwijane:
W3.CSS Akordeony
Read more at W3.CSS Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.