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