W3.CSS Introduzione (Lavello da cucina)
W3.Colori CSS
Le classi w3-color sono ispirate ai colori moderni utilizzati nel marketing, nei segnali stradali e nelle note adesive:
Contenitori W3.CSS
La classe w3-container è la più importante delle classi W3.CSS. Fornisce uguaglianza come:
- Margini comuni
- Imbottiture comuni
- Allineamenti verticali comuni
- Allineamenti orizzontali comuni
- Font comuni
- Colori comuni
La classe w3-container viene in genere utilizzata con elementi contenitore HTML, come:
<div>, <intestazione>, <piè di pagina>, <articolo>, <sezione>, <blockquote>, <modulo> e altro ancora.
Questa è un'intestazione
Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone. Questo articolo è grigio chiaro e il testo è marrone.
Questo è un piè di pagina.
Pannelli, note e citazioni di W3.CSS
La classe w3-panel può visualizzare tutti i tipi di note e citazioni:
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Avvisi W3.CSS
La classe w3-panel può essere utilizzata anche per tutti i tipi di avvisi:
Pericolo!
Il rosso indica spesso una situazione pericolosa o negativa.
Avvertimento!
Il giallo indica spesso un avviso che potrebbe richiedere attenzione.
Successo!
Il verde indica spesso qualcosa di positivo o di successo.
Informazioni!
Il blu indica spesso un cambiamento o un'azione informativa neutra.
Esempio
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Carte W3.CSS
Le classi w3-card sono adatte sia per le immagini che per le note:
Un'automobile
Un'auto è un veicolo a motore semovente a ruote utilizzato per il trasporto. La maggior parte delle definizioni del termine specificano che le auto sono progettate per circolare principalmente su strada, per avere posti a sedere da una a otto persone e per avere tipicamente quattro ruote.
(Wikipedia)
Sorprendente
Alpi francesi
Esempio
<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.Tabelle CSS
Le classi w3-table possono gestire tutti i tipi di tabelle:
| Nome di battesimo | Cognome | Punti |
|---|---|---|
| Jill | fabbro | 50 |
| vigilia | Jackson | 94 |
| Adamo | Johnson | 67 |
| Anja | Foro | 100 |
Esempio
<table class="w3-table w3-striped w3-border">
Elenchi W3.CSS
La classe w3-ul può gestire tutti i tipi di elenchi:
-
Mike
Web Designer -
Supporto Jill
-
Giovanna
Ragioniere -
Jack
consigliere
Esempio
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.Pulsanti CSS
La classe w3-button e w3-btn fornisce pulsanti di tutte le dimensioni e tipi.
Pulsanti larghi:
Bottoni circolari o quadrati:
W3.CSS Tag, etichette, badge e segni
Le classi w3-tag e w3-badge sono in grado di visualizzare tutti i tipi di tag, etichette, badge e segni:
2 8 UN B
Nuovo Avvertimento Pericolo Informazioni
RESPIRARE
SOTTO L'ACQUA
W3.CSS reattivo
Le classi Responsive Grid forniscono reattività per tutti i tipi di dispositivi: PC, laptop, tablet e dispositivi mobili.
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
riposo
1/4
riposo
100px
45px
riposo
W3.CSS supporta anche una griglia fluida mobile first a 12 colonne con classi piccole, medie e grandi.
W3.Display CSS
Le classi w3-display consentono di visualizzare gli elementi HTML in posizioni specifiche:
W3.CSS modali
La classe w3-modal fornisce una finestra di dialogo modale in puro HTML:
Immagine modale:
W3.Barre di avanzamento CSS
Maggiori informazioni su W3.CSS Barre di avanzamento
W3.CSS Dropdown
Le classi w3-dropdown forniscono menu a discesa:
Fisarmoniche 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.