elaborando

 delle ombre al testo dei nostri post è semplice, basta manipolare un po' l'html prima di pubblicare. Combinando ombre, luci e colori di sfondo, inoltre, si possono creare degli effetti interessanti.

Una premessa: Internet Explorer, il browser di casa Microsoft, per questi scopi utilizza un linguaggio diverso da quello comune a Firefox, Chrome e Safari. Per rendere gli effetti visibili a tutti i lettori del blog, indipendentemente dal browser che utilizzano, bisogna quindi fare "fatica doppia", inserire cioè due codici: uno per IE e l'altro per gli altri browser.

Vediamo le istruzioni.
La prima cosa da fare è assegnare delle caratteristiche speciali a un pezzo di pagina. A questo scopo occorre isolare il pezzo voluto in un blocco e poi assegnare a quel blocco lo stile desiderato, inserendo nel codice html quanto segue:


Non è quindi complicato.
Per aggiungere una semplice ombra al testo, il codice di stile per Firefox, Chrome e Safari, da inserire nella riga del "div", è:

style="width:400px; padding: 10px; color:#000000; font-family: Arial; font-size: 36px; background-color:#ffffff; text-shadow: 2px 2px 5px #000; "

in cui sono stati definiti nell'ordine: la larghezza del blocco, il margine tra contenuto e bordo del blocco (10 pixel), il colore dei caratteri (nero), il tipo (Arial), la loro dimensione (36 pixel), il colore di sfondo del blocco (bianco). Infine l'ombra: sfalsata di 2 pixel in basso e 2 a sinistra, con uno sfuocamento di 5 pixel, di colore nero.
Il codice addizionale di stile per IE è invece:

style="width: 400px; padding: 10px; filter: shadow(color=black, strength=5, direction=135);"

in cui l'ombra è nera, di intensità 5 e proiettata a 135° di rotazione rispetto alla verticale verso l'alto (quindi capita nel secondo quadrante cartesiano, per chi si ricorda qualcosa di coordinate e quadranti).
Ed ecco l'effetto:


Giocando sui colori dello sfondo, dei caratteri e delle ombre proiettate illuminando da diverse posizioni, si può ottenere un effetto "rilievo".
Codice per Ffox & co:

style="width:400px; padding: 10px; color:#aaaaaa; font-family: Arial black; font-size: 36px; background-color:#888888; text-shadow: -1px 7px 0px #000000, 1px -1px 0px #eeeeee; "

Codice addizionale per IE:

style="width:400px; padding: 10px; filter:shadow(color=black, strength=5, direction=210);"


Oppure, invertendo i colori delle ombre, un effetto "scavo".
Codice per Ffox & co:

style="width:400px; padding: 10px; color:#aaaaaa; font-family: Arial black; font-size: 36px; background-color:#888888; text-shadow: -1px 2px 0px #eeeeee, 1px -1px 0px #000000; "

codice addizionale per IE (servono due righe "span" e quindi due righe /span):
 

style="width:400px; padding: 10px; filter:shadow(color=black, strength=1, direction=30);"
style="width:400px; padding: 10px; filter:shadow(color=white, strength=2, direction=210);"


Colorando di giallo le ombre e lasciandole in orizzontale, si ha un effetto "evidenziatore".
Codice per Ffox & co:

style="width:400px; padding: 10px; color:#000000; font-family: Arial black; font-size: 36px; background-color:#888888; text-shadow: -5px 0px 5px #ffff00, 5px 0px 5px #ffff00; "

Codice addizionale per IE (servono due righe "span" e quindi due righe /span):

style="width:400px; padding: 10px; filter:shadow(color=yellow, strength=5, direction=90);"
style="width:400px; padding: 10px; filter:shadow(color=yellow, strength=5, direction=270);"


Gli effetti ottenuti su Internet Explorer sono meno belli. Può darsi che sia a causa del mio codice, non efficacissimo. Per oggi mi accontento così.