Riferimento W3.CSS
Classi W3.CSS
Classi di contenitori
Classe | Definisce | |
---|---|---|
w3-contenitore | Contenitore HTML con riempimento sinistro e destro di 16px | |
Usato come intestazione | ||
Usato come piè di pagina | ||
pannello w3 | Contenitore HTML con riempimento sinistro e destro di 16px e margine superiore e inferiore di 16px | |
Utilizzato per visualizzare una nota | ||
Utilizzato per visualizzare un preventivo | ||
distintivo w3 | Distintivo circolare | |
w3 giorno | Etichetta rettangolare | |
w3-ul | Lista non ordinata | |
w3-display-contenitore | Contenitore per classi w3-display (consente il posizionamento degli elementi all'interno del contenitore) | |
blocco w3 | Classe che può essere utilizzata per definire una larghezza intera per qualsiasi elemento | |
codice w3 | Contenitore di codice | |
codice w3 | Contenitore di codice in linea (per frammenti di codice) | |
contenuto w3 | Contenitore per contenuto centrato a dimensione fissa | |
macchina w3 | Contenitore per contenuti reattivi incentrati sulle dimensioni | |
w3-stretch | Classe che rimuove i margini destro e sinistro (particolarmente utile per allungare le righe imbottite (w3-row-padding)) |
Classi da tavola
Classe | Definisce | |
---|---|---|
w3-tabella | Contenitore per una tabella HTML | |
a righe w3 | Tavolo a righe | |
bordo w3 | Tavolo bordato | |
con bordo w3 | Linee bordate | |
centrato su w3 | Tavolo centrato | |
w3-libero | Tavolo mobile | |
w3-tavolo-tutto | Tutte le proprietà impostate | |
Con il bordo w3, il bordo w3 e il bordo w3 | ||
Con testa colorata | ||
Con risposta w3 | ||
Con w3-minuscolo | ||
Con w3-piccolo | ||
Con w3-grande | ||
Con w3-xlarge | ||
Con w3-xxlarge | ||
Con w3-xxxlarge | ||
Con il colore | ||
Con w3-jumbo | ||
w3-reattivo | Crea una tabella reattiva |
Classi di carte
Classe | Definisce | |
---|---|---|
carta w3 | Come w3-card-2 | |
w3-carta-2 | Contenitore per qualsiasi contenuto HTML (ombreggiatura con bordo di 2px) | |
w3-carta-4 | Contenitore per qualsiasi contenuto HTML (ombreggiatura con bordo 4px) |
Classi reattive
Classe | Definisce | |
---|---|---|
w3-riga | Contenitore per una riga di contenuto reattivo fluido | |
w3-riga-imbottitura | Riga in cui tutte le colonne hanno un riempimento predefinito | |
macchina w3 | Contenitore per contenuti reattivi incentrati sulle dimensioni | |
w3-stretch | Classe che rimuove i margini destro e sinistro | |
w3-metà | Contenitore della colonna dello schermo a metà (1/2). | |
w3-terzo | Terzo (1/3) contenitore della colonna dello schermo | |
w3-dueterzo | Contenitori per colonne di due terzi (2/3) dello schermo | |
w3-trimestre | Contenitore colonna schermo quarto (1/4). | |
w3-tre quarti | Contenitore della colonna dello schermo a tre quarti (3/4). | |
w3-col | Contenitore di colonne per qualsiasi contenuto HTML | |
w3-riposo | Occupa il resto della larghezza della colonna | |
l1 - l12 | Dimensioni reattive per schermi di grandi dimensioni | |
m1 - m12 | Dimensioni reattive per schermi medi | |
s1 - s12 | Dimensioni reattive per schermi piccoli | |
w3-nascondi-piccolo | Nascondi contenuto su schermi piccoli (meno di 601px) | |
w3-nascondi-mezzo | Nascondi contenuto su schermi medi | |
w3-nascondi-grande | Nascondi contenuto su schermi di grandi dimensioni (maggiore di 992 px) | |
immagine w3 | Immagine reattiva | |
w3-mobile | Aggiunge una reattività mobile first a qualsiasi elemento. Visualizza gli elementi come elementi di blocco sui dispositivi mobili. |
Classi di layout
Classe | Definisce | |
---|---|---|
riga di celle w3 | Contenitore per colonne di layout (celle). | |
cella w3 | Colonna layout (cella). | |
w3-cell-top | Allinea il contenuto nella parte superiore di una colonna (cella). | |
w3-cell-medio | Allinea il contenuto al centro verticale di una colonna (cella). | |
w3-cella-fondo | Allinea il contenuto in fondo a una colonna (cella). |
Classi Bar - Navigazione
Classe | Definisce | |
---|---|---|
w3-barra | Barra orizzontale | |
blocco barra w3 | Barra verticale | |
w3-bar-elemento | Fornisce uno stile comune per gli elementi della barra | |
w3-barra laterale | Barra laterale | |
Una barra laterale può contenere tutti i tipi di contenuto | ||
Una barra laterale che si sovrappone al contenuto principale | ||
Una barra laterale che si sovrappone a tutti i contenuti principali | ||
Una barra laterale che sposta il contenuto principale a destra | ||
Una barra laterale con uno sfondo sovrapposto | ||
Una barra laterale sul lato destro | ||
w3-collasso | Utilizzato insieme alla barra laterale w3 per creare una navigazione laterale reattiva completamente automatica. Affinché questa classe funzioni, il contenuto della pagina deve essere all'interno di una classe "w3-main". | |
w3-principale | Contenitore per il contenuto della pagina quando si utilizza la classe w3-collapse per le esplorazioni laterali reattive | |
Navigazione laterale reattiva completamente automatica sul lato destro |
Classi a discesa
w3-clic a discesa | Elemento a tendina cliccabile | |
w3-dropdown-hover | Elemento a discesa fluttuante | |
Elemento a discesa hoverable (usato in w3-bar) | ||
Elemento a discesa hoverable (usato in w3-bar-block) | ||
Elemento a discesa hoverable (usato nella barra laterale w3) |
Classi di pulsanti
Classe | Definisce | |
---|---|---|
pulsante w3 | Pulsante rettangolare con colore di sfondo grigio al passaggio del mouse | |
w3-btn | Pulsante rettangolare con ombre al passaggio del mouse | |
w3-cerchio | Può essere utilizzato per creare un pulsante circolare | |
w3-ondulazione | Bottone rettangolare con effetto ondulato | |
Pulsante mobile circolare con effetto ondulato | ||
w3-barra | Può essere utilizzato per raggruppare elementi (come pulsanti) in una barra orizzontale | |
blocco w3 | Classe che può essere utilizzata per definire un pulsante w3 a larghezza intera | |
Larghezza intera w3-btn | ||
Pulsante circolare a tutta larghezza |
Classi di ingresso
Classe | Definisce | |
---|---|---|
ingresso w3 | Elementi di input | |
Inserisci il modulo come una carta | ||
Elementi di input (etichette superiori) | ||
Elementi di input (etichette in basso) | ||
w3-verifica | Tipo di input della casella di controllo | |
radio w3 | Tipo di ingresso radio | |
w3-seleziona | Inserisci l'elemento di selezione | |
w3-animate-input | Anima la larghezza di un input al 100% |
Classi Modali
Classe | Definisce | |
---|---|---|
w3-modale | Contenitore modale | |
w3-contenuto-modale | Elemento pop-up modale | |
descrizione comando w3 | Elemento descrizione comando | |
w3-testo | Testo della descrizione comando |
Corsi di animazione
Classe | Definisce | |
---|---|---|
w3-animate-top | Anima un elemento dall'alto da -300px a 0px | |
w3-animate-sinistra | Anima un elemento da sinistra -300px a 0px | |
w3-animate-bottom | Anima un elemento dal basso da -300px a 0px | |
w3-animate-destra | Anima un elemento da destra -300px a 0px | |
w3-animazione-opacità | Anima l'opacità di un elemento da 0 a 1 | |
w3-anima-zoom | Anima un elemento di dimensioni comprese tra 0 e 100%. | |
w3-animate-dissolvenza | Anima l'opacità di un elemento da 0 a 1 e da 1 a 0 (dissolvenza in entrata e in uscita) | |
w3-spin | Ruota un'icona a 360 gradi | |
Ruota qualsiasi elemento a 360 gradi | ||
w3-animate-input | Anima la larghezza di un campo di input al 100% |
Font e classi di testo
Classe | Definisce | |
---|---|---|
w3-piccolo | Specifica una dimensione del carattere di 10 pixel | |
w3-piccolo | Specifica una dimensione del carattere di 12 pixel | |
w3-grande | Specifica una dimensione del carattere di 18 pixel | |
w3-xgrande | Specifica una dimensione del carattere di 24 pixel | |
w3-xxgrande | Specifica una dimensione del carattere di 32 pixel | |
w3-xxxgrande | Specifica una dimensione del carattere di 48 pixel | |
w3-jumbo | Specifica una dimensione del carattere di 64 pixel | |
w3-wide | Specifica un testo più ampio | |
w3-serif | Cambia il carattere in serif | |
w3-sans-serif | Cambia il carattere in sans-serif | |
w3-corsivo | Cambia il carattere in corsivo | |
w3-monospazio | Cambia il carattere in uno spazio vuoto |
Classi di visualizzazione
Classe | Definisce | |
---|---|---|
w3-centro | Contenuti centrati | |
w3-sinistra | Sposta un elemento a sinistra (fluttuante: sinistra) | |
w3-destra | Sposta un elemento a destra (fluttuante: destra) | |
w3-allineamento-sinistra | Testo allineato a sinistra | |
w3-allineamento-destra | Testo allineato a destra | |
w3-giustificare | Testo allineato a destra e a sinistra | |
blocco w3 | Classe che può essere utilizzata per definire una larghezza intera per qualsiasi elemento | |
w3-cerchio | Contenuto cerchiato | |
w3-nascondi | Contenuti nascosti (visualizzazione: nessuno) | |
w3-show | Mostra contenuto (visualizza:blocco) | |
w3-show-block | Alias di w3-show (display:block) | |
w3-show-inline-block | Mostra il contenuto come blocco in linea (visualizzazione: blocco in linea) | |
w3-top | Risolto il problema con il contenuto nella parte superiore di una pagina | |
w3-basso | Risolto il problema con il contenuto in fondo a una pagina | |
w3-display-contenitore | Contenitore per classi w3-display (posizione: relativa) | |
w3-display-in alto a sinistra | Visualizza il contenuto nell'angolo in alto a sinistra del w3-display-container | |
w3-display-in alto a destra | Visualizza il contenuto nell'angolo in alto a destra del w3-display-container | |
w3-display-in basso a sinistra | Visualizza il contenuto nell'angolo inferiore sinistro del w3-display-container | |
w3-display-in basso a destra | Visualizza il contenuto nell'angolo inferiore destro del w3-display-container | |
w3-display-sinistra | Visualizza il contenuto a sinistra (al centro a sinistra) del w3-display-container | |
w3-display-destra | Visualizza il contenuto a destra (al centro a destra) del w3-display-container | |
w3-display-centrale | Visualizza il contenuto al centro (centro) del w3-display-container | |
w3-display-topmiddle | Visualizza il contenuto nella parte centrale superiore del contenitore di visualizzazione w3 | |
w3-display-in basso al centro | Visualizza il contenuto nella parte inferiore centrale del contenitore di visualizzazione w3 | |
w3-posizione di visualizzazione | Visualizza il contenuto in una posizione specificata nel w3-display-container | |
w3-display-al passaggio del mouse | Visualizza il contenuto al passaggio del mouse all'interno del w3-display-container |
Classi di effetti
Classe | Definisce | |
---|---|---|
w3-opacità | Aggiunge opacità/trasparenza a un elemento (opacità: 0,6) | |
Aggiungi opacità/trasparenza al testo | ||
w3-opacità-off | Disattiva l'opacità/trasparenza (opacità: 1) | |
w3-opacità-min | Aggiunge opacità/trasparenza a un elemento (opacità: 0,75) | |
w3-opacità-max | Aggiunge opacità/trasparenza a un elemento (opacità: 0,25) | |
w3-scala di grigi-min | Aggiunge un effetto in scala di grigi a un elemento (scala di grigi: 50%) | |
w3-scala di grigi | Aggiunge un effetto in scala di grigi a un elemento (scala di grigi: 75%) | |
w3-scala di grigi-max | Aggiunge un effetto in scala di grigi a un elemento (scala di grigi: 100%) | |
w3-seppia-min | Aggiunge un effetto seppia a un elemento (seppia: 50%) | |
w3-seppia | Aggiunge un effetto seppia a un elemento (seppia: 75%) | |
w3-seppia-max | Aggiunge un effetto seppia a un elemento (seppia: 100%) | |
w3-sovrapposizione | Crea un effetto di sovrapposizione |
Classi di colore di sfondo
Classe | Definisce | |
---|---|---|
w3-rosso | Colore di sfondo rosso | |
w3-rosa | Colore di sfondo rosa | |
w3-viola | Colore di sfondo viola | |
w3-viola intenso | Colore di sfondo viola intenso | |
w3-indaco | Colore di sfondo indaco | |
w3-blu | Colore di sfondo blu | |
w3-azzurro | Colore di sfondo azzurro | |
w3-ciano | Colore di sfondo ciano | |
w3-acqua | Colore di sfondo acqua | |
w3-verde acqua | Colore di sfondo verde acqua | |
w3-verde | Colore di sfondo verde | |
w3-verde chiaro | Colore di sfondo verde chiaro | |
w3-lime | Colore di sfondo lime | |
w3-sabbia | Colore di sfondo sabbia | |
w3-kaki | Colore di sfondo cachi | |
w3-giallo | Colore di sfondo giallo | |
w3-ambra | Colore di sfondo ambrato | |
w3-arancione | Colore di sfondo arancione | |
w3-arancione intenso | Colore di sfondo arancione intenso | |
w3-blu-grigio | Colore di sfondo grigio blu | |
w3-marrone | Colore di sfondo marrone | |
w3-grigio-chiaro | Colore di sfondo grigio chiaro | |
w3-grigio | Colore di sfondo grigio | |
w3-grigio-scuro | Colore di sfondo grigio scuro | |
w3-nero | Colore di sfondo nero | |
w3-rosso-pallido | Colore di sfondo rosso pallido | |
w3-giallo-pallido | Colore di fondo giallo paglierino | |
w3-verde-pallido | Colore di sfondo verde chiaro | |
w3-azzurro | Colore di sfondo azzurro pallido | |
w3-trasparente | Colore di sfondo trasparente |
Classi colore al passaggio del mouse
I colori sopra possono essere usati anche come classi al passaggio del mouse:
Classe | Definisce | |
---|---|---|
w3-hover-bianco | Passa il colore bianco | |
w3-hover-nero | Passa il colore nero | |
w3-hover-rosso | Passa il colore rosso | |
w3-hover-blu | Passa il colore blu | |
w3-hover-verde | Passa il colore verde | |
w3-hover-aqua | Passa il colore acqua | |
w3-hover-arancione | Passa il colore arancione | |
w3-hover-grigio | Passa il colore grigio | |
w3-hover-verde-pallido | Passa il colore verde pallido |
Classi di colore del testo
Classe | Definisce | |
---|---|---|
w3-testo-rosso | Colore del testo rosso | |
w3-testo-verde | Colore del testo verde | |
w3-testo-blu | Colore del testo blu | |
w3-testo-giallo | Colore del testo giallo | |
w3-testo-grigio-chiaro | Text color light-grey | |
w3-text-grey | Text color grey | |
w3-text-dark-grey | Text color dark grey | |
w3-text-black | Text color black | |
w3-text-white | Text color white | |
w3-text-pink | Text color pink | |
w3-text-purple | Text color purple | |
w3-text-teal | Text color teal | |
w3-text-light-green | Text color light green | |
w3-text-lime | Text color lime | |
w3-text-deep-purple | Text color deep purple | |
w3-text-indigo | Text color indigo | |
w3-text-light-blue | Text color light blue | |
w3-text-blue-grey | Text color blue grey | |
w3-text-cyan | Text color cyan | |
w3-text-aqua | Text color aqua | |
w3-text-amber | Text color amber | |
w3-text-orange | Text color orange | |
w3-text-deep-orange | Text color deep orange | |
w3-text-sand | Text color sand | |
w3-text-khaki | Text color khaki | |
w3-text-brown | Text color brown |
Hover Text Classes
The text classes above can also be used as hover classes:
Class | Defines | |
---|---|---|
w3-hover-text-red | Hover text color red | |
w3-hover-text-green | Hover text color green | |
w3-hover-text-blue | Hover text color blue | |
w3-hover-text-yellow | Hover text color yellow |
Other Hover Classes
Class | Defines | |
---|---|---|
w3-hover-border-color | Hover border color | |
w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) | |
w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) | |
w3-hover-shadow | Adds shadow to an element on hover | |
w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element | |
w3-hover-sepia | Adds a sepia effect to an element on hover | |
w3-hover-none | Removes hover effects from an element |
Round Classes
Class | Defines | |
---|---|---|
w3-round | Element rounded (border-radius) 4px | |
w3-round-small | Element rounded (border-radius) 2px | |
w3-round-medium | Element rounded (border-radius) 4px | |
w3-round-large | Element rounded (border-radius) 8px | |
w3-round-xlarge | Element rounded (border-radius) 16px | |
w3-round-xxlarge | Element rounded (border-radius) 32px |
Padding Classes
Class | Defines | |
---|---|---|
w3-padding-small | Padding 4px top and bottom, and 8px left and right. | |
w3-padding | Padding 8px top and bottom, and 16px left and right. | |
w3-padding-large | Padding 12px top and bottom, and 24px left and right. | |
w3-padding-16 | Padding 16px top and bottom | |
w3-padding-24 | Padding 24px top and bottom | |
w3-padding-32 | Padding 32px top and bottom | |
w3-padding-48 | Padding 48px top and bottom | |
w3-padding-64 | Padding 64px top and bottom | |
w3-padding-top-64 | Padding 64px on top | |
w3-padding-top-48 | Padding 48px on top | |
w3-padding-top-32 | Padding 32px on top | |
w3-padding-top-24 | Padding 24px on top |
Margin Classes
Class | Defines | |
---|---|---|
w3-margin | Adds an 16px margin to an element | |
w3-margin-top | Adds an 16px top margin to an element | |
w3-margin-right | Adds an 16px right margin to an element | |
w3-margin-bottom | Adds an 16px bottom margin to an element | |
w3-margin-left | Adds an 16px left margin to an element | |
w3-section | Adds an 16px top and bottom margin to an element |
Border Classes
Class | Defines | |
---|---|---|
w3-border | Borders (top, right, bottom, left) | |
w3-border-top | Border top | |
w3-border-right | Border right | |
w3-border-bottom | Border bottom | |
w3-border-left | Border left | |
w3-border-0 | Removes all borders | |
w3-border-color | Displays any defined borders in a specified color (like red, etc) | |
w3-bottombar | Adds a thick bottom border (bar) to an element | |
w3-leftbar | Adds a thick left border (bar) to an element | |
w3-rightbar | Adds a thick right border (bar) to an element | |
w3-topbar | Adds a thick top border (bar) to an element | |
w3-hover-border-color | Hoverable border color |