Ombre CSS3 (Shadows)

Con CSS3, puoi applicare ombre agli elementi.

Ombre CSS3

CSS3 ti permette di aggiungere ombre agli elementi come in Photoshop, senza utilizzare alcuna immagine. Prima di CSS3, le immagini di taglio venivano utilizzate per creare ombre intorno a elementi fastidiosi.

La sezione successiva presenterà come applicare ombre ai testi e agli elementi.

Attributo box-shadow di CSS3

L'attributo box-shadow può essere utilizzato per aggiungere ombre agli elementi del riquadro. Puoi anche applicare più ombre utilizzando una lista di ombre separata da virgole. La sintassi di base per creare ombre di盒子 è fornita nel modo seguente:

box-shadow: offset-x offset-y blur-radius color;

I componenti dell'attributo box-shadow hanno il seguente significato:

• offset-x —Imposta l'offset orizzontale dell'ombra.

• offset-y —Imposta l'offset verticale dell'ombra.

• blur-radius —Imposta il raggio di sfocatura. Più grande è il valore, maggiore è lo sfocatura, più sfocata è l'ombra ai margini. Non sono ammessi valori negativi.

• colore —Imposta il colore dell'ombra. Se viene omesso o non specificato un valore di colore, avrà il colore predefinitocoloreValori dell'attributo

Per ulteriori informazioni sui valori possibili, consulta la proprietà box-shadow CSS3.

.box{
　　　　larghezza: 200px;
　　　　altezza: 150px;
　　　　background: #ccc;
　　　　box-shadow: 5px 5px 10px #999;
}

Analogamente, puoi aggiungere più ombre alle caselle utilizzando una lista separata da virgole:

.box{
　　　　larghezza: 200px;
　　　　altezza: 150px;
　　　　background: #000;
　　　　box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

Proprietà text-shadow CSS3

Puoi utilizzare l'attributo text-shadow per applicare un'ombra al testo. Puoi anche applicare più ombre al testo utilizzando la notazione uguale a box-shadow.

h1 {
　　　　text-shadow: 5px 5px 10px #666;
}
h2 {
　　　　text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}