Aggiungere l’ombreggiatura al testo con jQuery
Ultimamente ho scoperto jQuery, anche se in realtà la conoscevo da tempo — pur non avendone mai fatto uso. Si tratta, per chi non ne avesse ancora idea, di un approccio “morbido” a JavaScript (ottimale per chi non ha mai usato davvero questo linguaggio): perfetto per l’event handling, si integra coi CSS e in taluni casi li supplisce.
Nella circostanza, vedremo come aggiungere l’ombreggiatura al testo – è possibile farlo anche con le immagini a sfondo trasparente – “scavalcando” la dichiarazione analoga dei CSS 3. L’effetto prodotto si adatta automaticamente alla dimensione dei caratteri e non incide granché sui tempi di caricamento della pagina.
Occorre anzitutto scaricare lo script principale, quindi il plugin per l’ombreggiatura e (dopo averli caricati sullo spazio web) collegarli alla pagina principale all’interno dell’head.
<script type="text/javascript" src="/path/to/jquery-1.3.2.js"></script> <script type="text/javascript" src="/path/to/jquery.dropshadow.js"></script>
Quindi, associamo una classe agli elementi del testo che vogliamo rendere con l’ombreggiatura e richiamiamo la funzione attraverso un ulteriore script, che si occuperà di generare l’ombreggiatura a seconda delle impostazioni che sceglieremo.
<script type="text/javascript">
$(document).ready(function(){
$(".foo").dropShadow({
left: 4,
top: 4,
blur: 2,
opacity: 0.5,
color: "black",
swap: false
});
});
</script>
Analizziamo il codice: nell’esempio, sarà associata l’ombreggiatura a tutti gli elementi HTML con classe foo — utilizzando i parametri di default. Nella 1ª riga, lo script verifica che si possa effettivamente utilizzare jQuery, quindi – se l’esito è positivo – passa alla funzione.
Le variabili left e top indicano ovviamente la distanza dal testo (o, dall’immagine), mentre blur è forse quella più importante: in base al valore decimale che le si associa, modifica la tipologia d’ombreggiatura generata. In opacity si indica l’opacità voluta – equivalente ai valori assumibili dall’omonima dichiarazione nei CSS – e color cambia il colore dell’ombreggiatura. Infine, swap inverte l’ordine dell’originale rispetto all’effetto creato.