W3.CSS Intro (aanrecht)
W3.CSS-kleuren
De w3-kleurklassen zijn geïnspireerd op moderne kleuren die worden gebruikt in marketing, verkeersborden en plaknotities:
W3.CSS-containers
De klasse w3-container is de belangrijkste van de klassen W3.CSS. Het biedt gelijkheid zoals:
- Gemeenschappelijke marges
- Gemeenschappelijke opvullingen
- Algemene verticale uitlijningen
- Algemene horizontale uitlijningen
- Veelvoorkomende lettertypen
- Veel voorkomende kleuren
De klasse w3-container wordt meestal gebruikt met HTML-containerelementen, zoals:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> en meer.
Dit is een kop
Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin.
Dit is een voettekst.
W3.CSS-panelen, opmerkingen en citaten
De klasse w3-panel kan allerlei soorten notities en citaten weergeven:
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 9 miljoen inwoners.
W3.CSS-waarschuwingen
De klasse w3-panel kan ook worden gebruikt voor allerlei soorten waarschuwingen:
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Waarschuwing!
Geel geeft vaak een waarschuwing aan die mogelijk aandacht behoeft.
Succes!
Groen duidt vaak op iets succesvols of positiefs.
Informatie!
Blauw duidt vaak op een neutrale informatieve verandering of actie.
Voorbeeld
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSS-kaarten
De klassen w3-kaart zijn geschikt voor zowel afbeeldingen als notities:
Een auto
Een auto is een zelfaangedreven motorvoertuig op wielen dat wordt gebruikt voor transport. De meeste definities van de term specificeren dat auto's zijn ontworpen om voornamelijk op de weg te rijden, om plaats te bieden aan één tot acht personen en om vier wielen te hebben.
(Wikipedia)
Geweldig
Franse alpen
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-tabellen
De klassen w3-table kunnen alle soorten tabellen aan:
| Voornaam | Achternaam | Punten |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | verveeld | 100 |
Voorbeeld
<table class="w3-table w3-striped w3-border">
W3.CSS-lijsten
De klasse w3-ul kan allerlei soorten lijsten aan:
-
Mike
webdesigner -
Jill-
ondersteuning -
Jane
Accountant -
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-knoppen
De klasse w3-button en w3-btn biedt knoppen in alle soorten en maten.
Brede knopen:
Ronde of vierkante knoppen:
W3.CSS-tags, labels, insignes en tekens
De klassen w3-tag en w3-badge kunnen allerlei soorten tags, labels, badges en tekens weergeven:
2 8 EEN B
Nieuw Waarschuwing Gevaar Info
ADEMEN
ONDER WATER
W3.CSS Responsief
De klassen Responsive Grid bieden responsiviteit voor alle soorten apparaten: pc, laptop, tablet en mobiel.
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
rest
1/4
rest
100px
45px
rest
W3.CSS ondersteunt ook een 12-koloms mobiel-eerst vloeistofraster met kleine, middelgrote en grote klassen.
W3.CSS-weergave
Met de w3-display- klassen kunt u HTML-elementen op specifieke posities weergeven:
W3.CSS-modaliteiten
De klasse w3-modal biedt een modaal dialoogvenster in pure HTML:
Modale afbeelding:
W3.CSS-voortgangsbalken
Lees meer op W3.CSS-voortgangsbalken
W3.CSS-vervolgkeuzelijsten
De w3-dropdown- klassen bieden vervolgkeuzelijsten:
W3.CSS-accordeons
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.