Proprietà CSS3

CSS3 è l'ultima evoluzione del linguaggio Cascading Style Sheets. Anziché essere un'unica versione monolitica, CSS3 è suddiviso in moduli indipendenti — Animations, Flexbox, Grid Layout, Backgrounds and Borders, Transforms, Filters e altri — che i browser possono implementare e rilasciare separatamente. Ogni modulo ha aggiunto nuove proprietà all'insieme originale di CSS2, offrendo angoli arrotondati, gradienti, ombre, animazioni, layout flessibili e basati su griglia, e filtri visivi senza bisogno di immagini o JavaScript.

Questa pagina è un indice di riferimento rapido delle proprietà introdotte o significativamente estese in CSS3, organizzate per modulo di appartenenza. Ogni riga rimanda a un capitolo completo con sintassi, valori ed esempi interattivi.

Se sei alle prime armi con il linguaggio, inizia dai capitoli Introduzione a CSS e Sintassi CSS prima di approfondire le singole proprietà.

Come Usare Questo Riferimento

• Trova una proprietà per gruppo. I titoli seguenti rispecchiano i moduli CSS3: se hai bisogno di una proprietà di layout, cerca in Flexible Box Layout o Grid Layout; per il movimento, guarda sotto Animation o Transitions; per gli effetti visivi, consulta Filter Effects o Transform Properties.
• Clicca per i dettagli. Ogni proprietà rimanda al proprio capitolo con l'elenco completo dei valori, i valori predefiniti e demo eseguibili.
• Attenzione al supporto dei browser. I moduli CSS3 hanno raggiunto il supporto stabile e senza prefissi in momenti diversi. La maggior parte delle proprietà seguenti è sicura in tutti i browser moderni, ma verifica sempre il supporto per le aggiunte più recenti (ad esempio, alcune proprietà column-*) prima di utilizzarle in produzione.

Una Nota sui Prefissi Vendor

Mentre i moduli CSS3 erano ancora sperimentali, i browser rilasciavano le proprietà con prefissi vendor come -webkit-, -moz-, -ms- e -o-. Potresti ancora incontrarli in basi di codice più vecchie:

/* Older code — prefixes were needed during the experimental phase */
.box {
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg); /* Always list the unprefixed property last */
}

Per le proprietà elencate di seguito oggi quasi mai si hanno bisogno di prefissi — scrivi il nome standard senza prefisso. Usa i prefissi solo quando devi supportare un browser legacy, e indica sempre la proprietà standard per ultima in modo che sovrascriva le altre.

CSS3 vs. CSS2 — Cosa è Cambiato?

CSS2 copriva il box model fondamentale, i colori, i font e il posizionamento. CSS3 ha costruito su questa base aggiungendo le seguenti funzionalità, prima assenti o molto limitate:

• Angoli arrotondati e immagini di bordo — border-radius, border-image
• Ombre — box-shadow, text-shadow
• Gradienti e sfondi multipli — background-size, background-clip
• Layout flessibili e a griglia — Flexbox (flex, align-items, …), Grid (grid, grid-template-columns, …)
• Trasformazioni 2D e 3D — transform, perspective
• Transizioni fluide di stato — transition
• Animazioni con fotogrammi chiave — animation, @keyframes
• Testo su più colonne — column-count, column-gap
• Filtri visivi — filter (blur, brightness, contrast, …)
• Trasparenza personalizzata — opacity

Elenco delle Proprietà CSS3

Proprietà di Animazione

Le animazioni con fotogrammi chiave consentono di descrivere come un elemento transita attraverso una serie di istantanee di stile. La regola @keyframes definisce le istantanee; le proprietà animation-* le collegano e le controllano su un elemento.

/* Minimal animation example */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.banner {
  animation: slide-in 0.4s ease-out both;
}

Proprietà di Sfondo

CSS3 ha esteso gli sfondi per supportare il dimensionamento, le regioni di ritaglio e immagini multiple sovrapposte su un singolo elemento.

/* Responsive hero with background-size */
.hero {
  background-image: url('/img/hero.jpg');
  background-size: cover;       /* fills the box; crop as needed */
  background-position: center;
  background-clip: border-box;  /* default; image reaches border edge */
}

Proprietà di Bordo

CSS3 ha aggiunto angoli arrotondati e bordi basati su immagini — funzionalità che in precedenza richiedevano soluzioni basate su immagini.

/* Rounded button */
.btn {
  border-radius: 6px;
  border: 2px solid steelblue;
}

/* Pill shape */
.badge {
  border-radius: 999px;
}

Colore e Trasparenza

Effetti Filtro

La proprietà filter applica effetti grafici (sfocatura, luminosità, contrasto, ombra esterna, ecc.) direttamente in CSS — senza bisogno di un editor di immagini.

.card:hover img {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.2s ease;
}

.modal-backdrop {
  filter: blur(4px);
}

Flexible Box Layout

Flexbox è un modello di layout unidimensionale — distribuisce gli elementi lungo un singolo asse (riga o colonna) e gestisce automaticamente allineamento, spaziatura e a capo.

/* Classic centered card */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1 1 300px; /* grow | shrink | basis */
}

Per una guida completa, consulta La Guida Definitiva a Flexbox.

Proprietà dei Font

Grid Layout

CSS Grid è un sistema di layout bidimensionale — posiziona gli elementi in righe e colonne contemporaneamente, rendendolo ideale per layout a livello di pagina e griglie di componenti complesse.

/* Three-column responsive grid */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

Proprietà di Layout Multi-Colonna

Il layout multi-colonna distribuisce automaticamente il contenuto su un numero o una larghezza di colonne definiti — simile a un layout da giornale.

/* Two-column article body */
.article-body {
  columns: 2 400px;   /* shorthand: column-count column-width */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

h2 {
  column-span: all; /* heading breaks out of columns */
}

Proprietà di Outline

Proprietà del Testo

CSS3 ha aggiunto il controllo sul testo che esula, sull'a capo, sulle ombre e sulla stilizzazione fine delle decorazioni del testo.

/* Truncate long titles with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle heading shadow */
h1 {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Proprietà di Trasformazione

Le trasformazioni spostano, ruotano, ridimensionano o distorcono gli elementi in spazio 2D o 3D senza influire sul flusso del documento.

/* 2D card flip on hover */
.card {
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-back {
  backface-visibility: hidden;
}

Proprietà di Transizione

Le transizioni animano il cambiamento di una proprietà da un valore all'altro nel corso di una durata specificata, quando una proprietà CSS cambia (ad es., su :hover).

/* Smooth color + shadow on hover */
.btn {
  background-color: steelblue;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: dodgerblue;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Transizioni vs. animazioni: usa transition per cambiamenti guidati dallo stato (hover, focus, active) — sono più semplici da scrivere. Usa animation con @keyframes per movimenti indipendenti, ciclici o a più passaggi che si eseguono senza interazione dell'utente.

Proprietà di Formattazione Visiva

Riferimenti Correlati

Una volta individuata la proprietà di cui hai bisogno, questi capitoli trattano in profondità le funzionalità CSS3 più utilizzate:

• CSS Animation e @keyframes per il movimento basato su fotogrammi chiave.
• La Guida Definitiva a Flexbox per il layout unidimensionale.
• grid e grid-template-columns per il layout di pagina bidimensionale.
• filter per sfocatura, luminosità, contrasto, ombra esterna e altri effetti grafici.
• transform e transition per effetti visivi e transizioni fluide di stato.
• border-radius e box-shadow per la stilizzazione decorativa moderna.

Pratica