Il Meridiano e l’uso delle ombre per evidenziare i contorni

Anche il sito web Il-Meridiano.it ha usato quell’effetto che abbiamo già visto altrove per aggiungere un tocco particolare ai titoli.

In passato avevamo visto solo il contorno delle lettere evidenziato in un colore diverso rispetto a quello delle aste (lettere nere con contorno verde). Qui invece abbiamo anche l’effetto ombra.

In pratica le lettere sono in caratteri Raleway, in rosso scuro con bordino nero e ombreggiatura nera in basso e a destra.

Nel codice della pagina possiamo vedere qual è l’impostazione precisa, contenuta nel file theme.9.css. Il selettore si chiama text-shadow e dice così:

text-shadow: 3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;

La prima cosa che fa è aggiungere un’ombra nera al disotto della scritta originale, il cui colore è dato dal selettore color, spostata di tre pixel sull’asse orizzontale (verso destra) e tre sull’asse verticale (verso il basso). Questa è l’ombra vera e propria.

Gli altri quattro valori servono per evidenziare il contorno, e sono in realtà quattro ombre spostate di un solo pixel rispetto alla scritta originale. La prima è spostata a sinistra in alto, la seconda a destra in alto, la terza a sinistra in basso, la quarta a destra in basso.

Visto che la distanza è di un solo pixel e che le ombre sono tutte dello stesso colore, non si nota nessuno scostamento tra l’una e l’altra e sembrano tutte parte della stessa linea di contorno.

Il colore utilizzato in questo caso è #000. I valori sono RGB, ossia rosso, verde e blu. Ogni cifra è esadecimale, ossia va da 0 (minimo) a F (massimo). Ad esempio il rosso è #f00, il verde è #0f0, il giallo è dato da rosso+verde ossia #ff0, bianco è #fff e così via.

Il numero 0 che compare tra spostamento e colore è la sfocatura. Richiede un valore in pixel e può servire per rendere graduale il passaggio tra colore di primo piano e colore di sfondo. Invece che un’ombra vera e propria si può arrivare a creare una specie di alone attorno alle lettere.

Lo spostamento rispetto alla scritta può avere un valore qualsiasi, anche negativo, fino a proiettarla in tutt’altra parte della pagina.

Non so se esiste un limite al numero di ombre che si possono aggiungere. Io ne ho provate ad aggiungere sei e ha funzionato, e questo è già molto più di quanto ci sia bisogno di solito. 

 

Ad una scritta di colore nero (automatico) ho aggiunto nell'ordine: un'ombra rossa, spostata di due pixel a destra e in basso; un'ombra gialla, spostata di altri due pixel, un'ombra verde, come sopra, e un'ombra blu. Poi ci ho messo anche un'ombra azzurra (ciano) ma sfocata di ben 17 pixel per cui i contorni non si riconoscono più. Infine ho aggiunto un'altra ombra spostata verso il basso di ben 100 pixel, colore magenta, che ad un osservatore può sembrare una scritta diversa ma è solo un altro duplicato dell'unica parola che ho scritto nel corpo della pagina.