Proprietà CSS3

Trova un elenco di tutte le proprietà appartenenti alla specifica CSS3, suddivise per gruppi. Consulta i riferimenti e le brevi descrizioni.

In questa pagina puoi trovare tutti i gruppi di proprietà CSS3 con riferimenti e brevi descrizioni.

Elenco delle proprietà CSS3

Proprietà di animazione

Proprietà	Descrizione
animation	Anima (modifica gradualmente da uno stile all'altro) le proprietà CSS con valori discreti.
animation-delay	Specifica quando inizierà un'animazione.
animation-direction	Imposta come deve essere riprodotta l'animazione: in avanti, all'indietro o in cicli alternati.
animation-duration	Definisce la durata (in secondi o millisecondi) necessaria a un'animazione per completare un ciclo.
animation-fill-mode	Imposta uno stile all'elemento quando l'animazione non è in esecuzione (prima che inizi, dopo che termina o entrambi).
animation-iteration-count	Definisce quante volte deve essere riprodotta l'animazione.
animation-name	Definisce il nome della regola @keyframes che vuoi applicare. Ha due valori: none e keyframename.
animation-play-state	Specifica se l'animazione è in esecuzione o è in pausa.
animation-timing-function	Definisce come l'animazione procederà nel corso di ogni ciclo, non per l'intera durata dell'animazione.
@keyframes (at-rule)	La at-rule @keyframes è la base per le animazioni a keyframe usate per animare (modificare gradualmente da uno stile all'altro) molte proprietà CSS.

Proprietà di sfondo

Proprietà	Descrizione
background-clip	Specifica quanto il background-color e la background-image devono distare dall'elemento.
background-origin	Specifica l'area di posizionamento dello sfondo di una background-image.
background-size	Definisce la dimensione dell'immagine di sfondo.

Proprietà dei bordi

Proprietà	Descrizione
border-bottom-left-radius	Definisce la forma arrotondata dell'angolo in basso a sinistra dell'elemento.
border-bottom-right-radius	Imposta l'arrotondamento dell'angolo in basso a destra dell'elemento.
border-image	Permette di specificare un'immagine come bordo attorno a un elemento.
border-image-outset	Specifica di quanto l'immagine del bordo si estende oltre il box del bordo dell'elemento.
border-image-repeat	Specifica se la border-image sarà arrotondata, ripetuta o allungata.
border-image-slice	Specifica come suddividere l'immagine indicata da border-image-source in nove regioni: quattro angoli, quattro bordi e una parte centrale.
border-image-source	Imposta l'immagine sorgente per creare l'immagine del bordo di un elemento.
border-image-width	Definisce la larghezza dell'immagine del bordo.
border-radius	Crea angoli arrotondati per il bordo esterno di un elemento.
border-top-left-radius	Definisce l'arrotondamento dell'angolo in alto a sinistra dell'elemento. Esistono tre tipi di arrotondamento.
border-top-right-radius	Definisce la forma arrotondata dell'angolo in alto a destra dell'elemento. Esistono tre tipi di arrotondamento.

Proprietà del colore

Proprietà	Descrizione
opacity	Specifica la trasparenza di un elemento.

Flexible Box Layout

Proprietà	Descrizione
align-content	Allinea le righe di un contenitore flex quando c'è spazio disponibile in verticale (sull'asse trasversale).
align-items	Definisce l'allineamento predefinito degli elementi flex lungo l'asse trasversale.
flex	Specifica i componenti di una lunghezza flessibile.
flex-basis	Definisce la dimensione principale iniziale dell'elemento flessibile.
flex-direction	Definisce l'asse principale di un contenitore flex e imposta l'ordine in cui appaiono gli elementi flex.
flex-flow	Una proprietà shorthand per le proprietà flex-wrap e flex-direction.
flex-grow	Specifica di quanto l'elemento crescerà rispetto agli altri elementi del contenitore flex.
flex-shrink	Specifica di quanto l'elemento si restringerà rispetto agli altri elementi del contenitore flex.
flex-wrap	Specifica se gli elementi flessibili devono andare a capo o meno.
justify-content	Allinea gli elementi quando questi non occupano tutto lo spazio disponibile in orizzontale.
order	Specifica l'ordine di un elemento flessibile all'interno del contenitore flex o grid.

Proprietà dei font

Proprietà	Descrizione
font-size-adjust	Controlla la dimensione del font quando il primo font selezionato non è disponibile.
font-stretch	Rende il testo più stretto o più largo.

Proprietà del Multi-column Layout

Proprietà	Descrizione
column-count	Specifica il numero di colonne in cui viene suddiviso il contenuto di un elemento.
column-fill	Controlla il contenuto dell'elemento quando viene suddiviso in colonne.
column-gap	Imposta l'ampiezza dello spazio tra le colonne.
column-rule	Definisce lo stile, la larghezza e il colore della linea tra le colonne.
column-rule-color	Imposta il colore della linea.
column-rule-style	Definisce lo stile della linea tra le colonne.
column-rule-width	Definisce la larghezza della linea tra le colonne.
column-span	Specifica se l'elemento si estende su una sola colonna o su tutte le colonne.
column-width	Definisce la larghezza delle colonne.
columns	Una proprietà shorthand per column-count e column-width.

Proprietà dell'outline

Proprietà	Descrizione
outline-offset	Specifica lo spazio tra un outline e il bordo di un elemento.

Proprietà del testo

Proprietà	Descrizione
tab-size	Imposta la larghezza di un carattere di tabulazione.
text-align-last	Imposta l'allineamento dell'ultima riga del testo.
text-decoration-color	Imposta il colore della decorazione del testo.
text-decoration-line	Specifica il tipo di linea che verrà usata per la decorazione del testo.
text-decoration-style	Specifica lo stile della decorazione del testo.
text-justify	Definisce il comportamento della spaziatura tra parole o caratteri.
text-overflow	Specifica come segnalare all'utente il testo inline in eccesso.
text-shadow	Permette di aggiungere ombre al testo.
word-break	Specifica dove devono essere interrotte le righe.
word-wrap	Permette di spezzare le righe in parole per adattarle al contenitore.

Proprietà di trasformazione

Proprietà	Descrizione
backface-visibility	Specifica se la faccia posteriore di un elemento deve essere visibile o meno.
perspective	Conferisce prospettiva a un elemento posizionato in 3D e determina la distanza dal piano z=0.
perspective-origin	Definisce la posizione da cui l'utente osserva l'elemento posizionato in 3D.
transform	Specifica la trasformazione bidimensionale o tridimensionale dell'elemento.
transform-origin	Permette di cambiare la posizione della trasformazione degli elementi.
transform-style	Specifica come gli elementi figli vengono renderizzati nello spazio tridimensionale (3D).

Proprietà delle transizioni

Proprietà	Descrizione
transition	Proprietà shorthand per le seguenti proprietà: transition-property, transition-duration, transition-timing-function, transition-delay
transition-delay	Specifica quando deve iniziare l'effetto di transizione.
transition-duration	Specifica quanto deve durare l'animazione di transizione.
transition-property	Specifica i nomi delle proprietà per la transizione.
transition-timing-function	Specifica l'andamento della transizione nel corso della sua durata, permettendo di modificarne la velocità.

Proprietà di formattazione visiva

Proprietà	Descrizione
overflow-x	Specifica se il contenuto deve essere nascosto, visibile o scorrere in orizzontale quando supera i bordi sinistro e destro dell'elemento.
overflow-y	Specifica se il contenuto deve essere nascosto, visibile o scorrere in verticale quando supera i bordi superiore e inferiore dell'elemento.
resize	Specifica come l'elemento è ridimensionabile.
box-shadow	Permette di implementare più ombre attorno al box, specificando i valori per colore, dimensione, sfocatura, offset e inset.
box-sizing	Definisce il calcolo della width e dell'height di un elemento, se includono padding e bordi.

Pratica

Was this page helpful?