W3.CSS- inleiding (kombuiswasbak)
W3.CSS Kleure
Die w3-kleurklasse is geïnspireer deur moderne kleure wat in bemarking, padtekens en plaknotas gebruik word:
W3.CSS Houers
Die w3- houerklas is die belangrikste van die W3.CSS-klasse. Dit bied gelykheid soos:
- Algemene kantlyne
- Algemene vulsels
- Algemene vertikale belynings
- Algemene horisontale belynings
- Algemene lettertipes
- Algemene kleure
Die w3-houerklas word tipies gebruik met HTML-houerelemente, soos:
<div>, <header>, <footer>, <artikel>, <afdeling>, <blockquote>, <form>, en meer.
Dit is 'n kop
Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin. Hierdie artikel is liggrys en die teks is bruin.
Hierdie is 'n voetskrif.
W3.CSS Panele, Notas, en Aanhalings
Die w3-paneelklas kan allerhande notas en aanhalings vertoon:
Londen is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 9 miljoen inwoners.
Londen is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 9 miljoen inwoners.
W3.CSS-waarskuwings
Die w3-paneelklas kan ook vir alle soorte waarskuwings gebruik word:
Gevaar!
Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.
Waarskuwing!
Geel dui dikwels op 'n waarskuwing wat dalk aandag moet kry.
Sukses!
Groen dui dikwels op iets suksesvol of positief.
Inligting!
Blou dui dikwels op 'n neutrale insiggewende verandering of aksie.
Voorbeeld
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSS Kaarte
Die w3-kaart klasse is geskik vir beide beelde en notas:
N motor
'n Motor is 'n wiel, selfaangedrewe motorvoertuig wat vir vervoer gebruik word. Die meeste definisies van die term spesifiseer dat motors ontwerp is om hoofsaaklik op paaie te hardloop, om sitplek vir een tot agt mense te hê, en om tipies vier wiele te hê.
(Wikipedia)
Wonderlik
Franse Alpe
Voorbeeld
<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.CSS Tabelle
Die w3-tafelklasse kan alle soorte tafels hanteer:
| Eerste naam | Van | Punte |
|---|---|---|
| Jill | Smith | 50 |
| Eva | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Bore | 100 |
Voorbeeld
<table class="w3-table w3-striped w3-border">
W3.CSS-lyste
Die w3-ul- klas kan allerhande lyste hanteer:
-
Mike
Web Ontwerper -
Jill
Ondersteuning -
Jane
Rekenmeester -
Jack
Adviseur
Voorbeeld
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.CSS-knoppies
Die w3-knoppie en w3-btn- klas bied knoppies van alle groottes en tipes.
Wye knoppies:
Sirkelvormige of vierkantige knoppies:
W3.CSS-etikette, etikette, kentekens en tekens
Die w3-merker en die w3-kentekenklasse is in staat om allerhande etikette, etikette, kentekens en tekens te vertoon:
2 8 A B
Nuut Waarskuwing Gevaar Inligting
ASEM HAAL NIE
W3.CSS Responsief
Die Responsive Grid -klasse bied responsiwiteit vir alle toesteltipes: rekenaar, skootrekenaar, tablet en selfoon.
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
50 px
rus
1/4
rus
100 px
45 px
rus
W3.CSS ondersteun ook 'n 12 kolom mobiele eerste vloeistof rooster met klein, medium en groot klasse.
W3.CSS Vertoon
Die w3-vertoonklasse laat jou toe om HTML-elemente in spesifieke posisies te vertoon:
W3.CSS Modale
Die w3-modale klas bied modale dialoog in suiwer HTML:
Modale beeld:
W3.CSS-vorderingstawe
Lees meer by W3.CSS Progress Bars
W3.CSS Dropdowns
Die w3-aftrekkiesklasse bied aftreklys:
W3.CSS Trekklaviere
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.