di Claudio Cicali, 26 dicembre 2004

Tanto per capirsi, ecco il risultato che vogliamo ottenere alla fine dell’articolo:

Il limite di questo tecnica, al fine di non complicarci troppo la vita, è che la larghezza del box è fissa. Prima di iniziare occorre dunque prefiggerci la larghezza del box. In questo articolo la larghezza scelta sarà di 200px. Alla fine dell’articolo, in un piccolo approfondimento, illustrerò un metodo per superare anche questo limite.

Per ottenere l’effetto desiderato utilizzeremo il nostro programma di grafica preferito per disegnare l’ombra e poi qualche buona “pennellata” di CSS per mettere insieme i pezzi. Non esiste infatti in CSS puro un metodo per definire l’ombra di un oggetto. Dovremmo cercare dunque un sistema che permetta di ottenere il risultato ma nello stesso tempo non sporchi e appesantisca troppo il codice HTML stravolgendo la struttura con elementi usati solo per effetti scenografici. Il che è MALE.

L’idea

L’idea alla base di questa tecnica è molto semplice e prevede di usare due distinte immagini per la parte superiore e inferiore dell’ombreggiatura ed una sola immagine per l’ombreggiatura del corpo. Questa ultima immagine sarà usata come background-image di tutto il box in maniera che l’effetto sia esteso automaticamente per tutta l’altezza del box.

L’ombra

Per prima cosa “costruiamo” la nostra ombra. Apriamo The Gimp e creiamo una nuova immagine sufficientemente spaziosa: 300x200 direi che può andare.

Creiamo una selezione larga 200 pixel e alta quanto vogliamo, non ha importanza.

Fig. 1 - Nuova immagine, una selezione

Dal menu “Script-Fu” selezioniamo adesso “Shadow > Drop-Shadow”. Nel dialog box che apparirà, impostiamo i parametri che ci permettono di definire l’ombra che preferiamo. Per il nostro esempio impostiamo gli offset X e Y al valore 3, il “Blur radius” a 12 e l’opacità a 70.

Fig. 2 - Dialog box con i parametri dell’ombra

A questo punto dovremmo aver creato la nostra ombra. Unite i due livelli appena creati (“Background” e “Drop-shadow”) tramite l’opzione “Merge down” del menu contestuale del layer “Drop-shadow”. Quello che rimane da fare è dissezionare l’immagine in tre parti: la parte superiore, quella inferiore e quella che andrà a costituire la parte centrale. Prima di tutto togliamo la selezione corrente (ctrl-shift-a, oppure “Select > None”) e poi, utilizzando lo strumento Crop e aiutandoci zoomando al 300%, togliamo dalla nostra immagine tutto quello che non ci serve riducendone le dimensioni al minimo necessario.

Fig. 3 - Immagine finale, prima di essere sezionata

L’immagine corrente risulta essere larga 215 pixel, contando la parte “interna” all’ombra di 200 pixel più appunto la sfumatura dell’ombra stessa.

Selezioniamo adesso una striscia della nostra immagine, che comprenda per tutta la larghezza dell’immagine la parte alta dell’ombra, per un’altezza di circa una decina di pixel (nel mio caso). Copiate la selezione e create una nuova immagine tramite l’opzione “Edit > Paste as New”.

Salviamo l’immagine corrente come “shdw_top.png” e ripetiamo la stessa operazione con la parte inferiore dell’ombra: andremo a creare così “shdw_bottom.png”.

Selezioniamo, dal corpo della nostra ombra, una striscia di pochi pixel (nel mio caso 3). Creiamo così, con lo stesso metodo dei primi due elementi il file “shdw_body.png”.

Fig. 4 - Le tre immagini da usare nel CSS (Zoom al 200%)

Abbiamo finalmente ottenuto tutti i pezzi necessari per comporre il nostro mosaico. E’ ora di abbandonare il Gimp e metter mano ai CSS.

Costruiamo il mosaico

Il nostro box, dal punto di vista HTML, sarà composto da un DIV contenitore al cui interno saranno presenti due immagini (il top e il bottom della nostra ombra) e un altro DIV con il contenuto effettivo (testo).

<div class="shdwBox">
    <img class="shdwBoxTop" alt="" src="shdw_top.png">
    <img class="shdwBoxBottom" alt="" src="shdw_bottom.png">

    <div class="shdwBoxContent">
        <h1>Titolo</h1>
        <p>
        Testo
        </p>
    </div>

</div>

Il div contenitore avrà assegnata la classe shdwBox la quale avrà le seguenti caratteristiche (togliendo tutte le proprietà aggiuntive che, in questo momento, non ci interessano):

.shdwBox {
    position: relative;
    background: url(shdw_body.png);
    background-repeat: repeat-y;
    width: 215px;
}

Le due immagini di classe shdwBoxTop e shdwBoxBottom avranno le seguenti caratteristiche:

img.shdwBoxBottom,
img.shdwBoxTop {
    position: absolute; 
    z-index: 1;
}

img.shdwBoxTop {
    top: 0; 
}

img.shdwBoxBottom {
    bottom: -13px; 
}

Il motivo del position: relative della classe shdwBox sta proprio nel dover imporre una posizione assoluta alle due immagini. In questo modo costringiamo l’una e l’altra rispettivamente all’estremità superiore ed inferiore del nostro DIV. L’offset negativo di 13px dell’immagine di fondo è dovuto alla necessità di farla scendere verso il basso tanto quanto è alta la sfocatura dell’ombra. Per meglio visualizzare questa necessità, potete provate ad esercizio finito a togliere quell’offset.

Viene inoltre imposto uno z-index molto basso, almeno più basso di quello del DIV che conterrà il testo del box. Questo servirà a forzare le due immagini a rimanere sempre in secondo piano.

L’ultimo elemento che ci interessa, a questo punto, è il DIV che serve come wrapper di tutto il contenuto del box:

.shdwBoxContent {
    position: relative;
    margin-left: 4px;
    margin-right: 11px;
    top: 4px;
    z-index: 2;
}

Si noti dunque lo z-index e i margini necessari per centrare il nostro DIV all’interno dei nostri originali 200 pixel. 4 e 11 sono infatti quanto deve essere aggiunto a 200 per ottenere la larghezza del box compresa dell’ombra, mentre i 4 pixel di testa sono esattamente l’altezza della porzione di ombra dell’immagine superiore (complementare ai 13 pixel dell’immagine inferiore).

Possibili miglioramenti

Sicuramente il primo miglioramento che ci viene in mente è quello di togliere il limite della grandezza fissa del nostro box. Un metodo per fare ciò è costruire le immagini superiore e inferiore dell’ombra non come pezzi unici ma ognuna divisa in due parti. In questo modo sarà possibile rendere dinamica la larghezza del nostro box, fino ad un massimo uguale alla somma della larghezza delle due distinte parti (che saranno create con una larghezza che sia poco più della minima possibile).

Metodi più sofisticati (che prevederebbero l’utilizzo di una background-image in due DIV aggiuntivi, in testa e in coda al box), renderebbero però, secondo me, il codice HTML veramente troppo pesante, rispetto poi al risultato da ottenere.

Commenti ? Claudio Cicali, claudio PRESSO cicali.org

I contenuti di questo sito sono © 2004 Claudio Cicali. La copia letterale e la distribuzione del materiale qui raccolto nella sua integrità sono permesse con qualsiasi mezzo, a condizione che questa nota sia riprodotta (se non diversamente indicato).