drop shadows con jQuery
March 14th, 2007Esigenza:
Applicare un’ombra ad un’immagine qualsiasi, di qualunque dimensione, con i CSS e senza introdurre elementi extra di markup… o perlomeno che così sembri!
L’effetto è esattamente quello che vedete qui a fianco. L’ombra è un classico. Prima degli standards, che da un certo punto di vista hanno anche stimolato l’esigenza di creare stili parametrici, per così dire, coè validi per una o l’altra cosa, le immagini se avevano l’ombra era perchè dal photoshop gliela mettevi. Sin dal maggio 2004 si parla di ‘ombre’ intorno alle immagini e fatte coi CSS.
Prima di tutto bisogna dire che dal punto di vista del nostro codice (X)HTML, l’ esempio originale - introduce nel markup ben 4 div (che però non hanno valore semantico o struttuale) che “avvolgono” l’immagine, e per ognuna di esse dispone un background tagliato in un certo modo e posizionato di conseguenza. Notare che non c’è altro modo con l’(x)html ed i css per fare un’ombra!
E tutto questo, nel caso sia necessario avere un markup strutturato e semantico, probabilmente non è il metodo migliore per avere l’ombra. Se la sintassi è il vero problema, questa tecnica non è quella giusta, perchè introduce extra-markup.
Ma no, noi vogliamo l’ombra, e non vogliamo farla col photoshop su ogni immagine. E vogliamo pure mantenere il codice pulito…. cioè non vogliamo aggiungere a mano div su div intorno ad ogni immagine.
Ecco, questo è il codice (x)html che “avvolge” la nostra immagine.
<div class="wrap0">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="immagine.gif" alt="La mia immagine con intorno l'ombra"/>
</div>
</div>
</div>
</div>
mmmh… i puristi non sembrano soddisfatti.
Non sarebbe meglio avere solo questa riga di codice?
<img src="immagine.gif" class="dropshadow" alt="La mia immagine con intorno l'ombra" />
Soluzione
Ecco come jQuery risolve il problema, introducendo a runtime (al caricamento del documento) il codice extra di cui sopra:
$(document).ready(function(){
$("img.dropshadow").wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div></div>");
});
Questo codice usa il metodo .wrap() per creare le 4 div. Il fatto che le div siano aggiunte a runtime ci semplifica notevolmente la manutenzione del sito, l’aggiornamento, e la migrazione verso una nuova ipotetica grafica mantenendo inalterato il nostro markup.
Ogni div ha un background posizionato di conseguenza nei CSS, vediamo come:
/* jquery dropshadow classes */
.wrap0 {
float:left;
background: transparent url(images/shadow.gif) right bottom no-repeat;
margin: 1em 0.5em 0 -4px;
}
.wrap1 {
background:transparent url(images/shadow180.gif) no-repeat;
}
.wrap2 {
background:transparent url(images/corner_bl.gif) -16px 100% no-repeat;
}
.wrap3 {
padding: 10px 12px 12px 10px;
background:transparent url(images/corner_tr.gif) 100% -16px no-repeat;
}
div[class="wrap0"]{ /* for modern browsers */
margin: 0 1em 0 -8px;
}
Ecco.
Quindi quale è il vantaggio dell’usare jQuery per fare i drop shadow?
Che tutto si riduce al solo tag immagine <img src="immagine.gif" class="dropshadow" alt="La mia immagine con intorno l'ombra" /> a cui aggiungo solo la classe “dropshadow”.
Et voilà, drop shadows con jQuery.
