Cerca articoli della Knowledge Base

Box-shadow e ombre

La proprietà box-shadow aggiunge ombre agli elementi.

Sintassi

.card {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
  /* offset-x offset-y blur color */
}

Ombra interna (inset)

.inset {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

Ombre multiple

.layered {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

Effetto elevazione Material Design

.elevated {
  box-shadow:
    0 3px 6px rgba(0,0,0,0.16),
    0 3px 6px rgba(0,0,0,0.23);
  transition: box-shadow 0.3s;
}
.elevated:hover {
  box-shadow:
    0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
}

Hai trovato utile quest'articolo?

Articoli Correlati

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...

  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...

  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...

  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...

  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...