Intro W3.CSS (évier de cuisine)
Couleurs W3.CSS
Les classes de couleurs w3 s'inspirent des couleurs modernes utilisées dans le marketing, les panneaux de signalisation et les notes autocollantes :
Conteneurs W3.CSS
La classe w3-container est la plus importante des classes W3.CSS. Il fournit une égalité comme:
- Marges communes
- Rembourrages communs
- Alignements verticaux courants
- Alignements horizontaux courants
- Polices courantes
- Couleurs communes
La classe w3-container est généralement utilisée avec des éléments de conteneur HTML, tels que :
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, etc.
Ceci est un en-tête
Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron. Cet article est gris clair et le texte est marron.
Ceci est un pied de page.
Panneaux, notes et citations W3.CSS
La classe w3-panel peut afficher toutes sortes de notes et de citations :
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Alertes W3.CSS
La classe w3-panel peut également être utilisée pour toutes sortes d'alertes :
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Avertissement!
Le jaune indique souvent un avertissement qui pourrait nécessiter votre attention.
Succès!
Le vert indique souvent quelque chose de réussi ou de positif.
Info!
Le bleu indique souvent un changement informatif neutre ou une action.
Exemple
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Cartes W3.CSS
Les classes w3-card conviennent à la fois aux images et aux notes :
Une voiture
Une voiture est un véhicule à moteur autonome à roues utilisé pour le transport. La plupart des définitions du terme précisent que les voitures sont conçues pour rouler principalement sur les routes, pour avoir des sièges pour une à huit personnes et pour avoir généralement quatre roues.
(Wikipédia)
Incroyable
Alpes françaises
Exemple
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
Tableaux W3.CSS
Les classes w3-table peuvent gérer toutes sortes de tables :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Ennuyer | 100 |
Exemple
<table class="w3-table w3-striped w3-border">
Listes W3.CSS
La classe w3-ul peut gérer toutes sortes de listes :
-
Mike
Concepteur Web -
Soutien
de Julie -
Jeanne
Comptable -
Conseiller
Jacques
Exemple
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Boutons W3.CSS
Les classes w3-button et w3-btn fournissent des boutons de toutes tailles et de tous types.
Boutons larges :
Boutons circulaires ou carrés :
Balises, étiquettes, badges et panneaux W3.CSS
Les classes w3-tag et w3-badge sont capables d'afficher toutes sortes de tags, étiquettes, badges et signes :
2 8 UNE B
Nouvelle Avertissement Danger Info
RESPIRER
SOUS L'EAU
W3.CSS réactif
Les classes Responsive Grid offrent une réactivité pour tous les types d'appareils : PC, ordinateur portable, tablette et mobile.
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
du repos
1/4
du repos
100px
45px
du repos
W3.CSS prend également en charge une grille de fluide mobile à 12 colonnes avec des classes petites, moyennes et grandes.
Affichage W3.CSS
Les classes w3-display vous permettent d'afficher des éléments HTML dans des positions spécifiques :
Modalités W3.CSS
La classe w3-modal fournit un dialogue modal en pur HTML :
Image modale :
Barres de progression W3.CSS
En savoir plus sur les barres de progression W3.CSS
Listes déroulantes W3.CSS
Les classes w3-dropdown fournissent des listes déroulantes :
Accordéons W3.CSS
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.