Una delle proprietà che saranno introdotte con la nuova versione dei Cascading Style Sheet, la CSS3, è quella relativa all’ombreggiatura di un elemento e cioè box-shadow.

Questa proprietà prevede di definire i seguenti quattro valori: offset orizzontale, offset verticale, blur (estensione) e colore.

L’offset orizzontale e verticale consentono di definire l’angolo dell’ombra.

La sintassi CSS è la seguente:

#box {
…
-moz-box-shadow: 0 1px 20px #333; /* nell’ordine: offset orizzontale – offset verticale – blur (estensione) – colore */

-webkit-box-shadow: 0 1px 20px #333;
box-shadow: 0 1px 20px #333; /* per IE9 */
… }

Come già visto per la proprietà border-radius in questo articolo, è necessario indicare il prefisso -moz- per Mozilla (Firefox) e -webkit- per Safari e Chrome;  l’unico browser in circolazione che non è in grado di applicare la proprietà è Internet Explorer fino alla versione 8, la più recente in circolazione al momento.

Per vedere un esempio di applicazione della proprietà box-shadow, aprite questa pagina.

Ora, bisogna considerare innanzitutto che il nuovo rilascio HTML5/CSS3 approfondirà e rafforzerà la corrispondenza semantica tra i selettori e gli elementi di pagina, introducendo le voci: <header>, <nav>, <article>, <time>, <aside>, <section>, <footer>.

Considerare cioè solamente le novità riferite alle proprietà grafiche “esteriori” dei box e degli altri elementi di pagina sarebbe estremamente riduttivo.

Tuttavia alcune delle proprietà di prossima introduzione quali quelle menzionate consentiranno agli sviluppatori di ridurre il loro lavoro proprio in alcune parti più noiose e banalmente esecutive, quali la creazione di gif finalizzate all’arrotondamento degli angoli o di jpeg per l’aggiunta di ombre.

E non è poco.