Cerca articoli della Knowledge Base

Box-shadow e ombre

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

    Introduzione al CSS Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile...

  • Selettori Css di Base

    Selettori Css di Base I selettori CSS permettono di identificare gli elementi HTML a cui applicare g...

  • Proprietà color e background

    Proprietà color e background Le proprietà color e background sono fondamentali per definire l'aspett...

  • Margin e Padding

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

  • Box Model CSS

    Box Model CSS Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappres...