Come viene evidenziato il testo sul sito Not

Il sito Not (not.neroeditions.com) pubblica lunghi articoli articoli filosofici anarchici incomprensibili ai più. Ma ha un’impaginazione interessante, curata e di impatto. I titoli sono in Tungsten Narrow Bold, che già di per sé è una specie di Impact, in dimensione 140 pixel e in colore verde puro (#0f0), su uno spazioso fondale bianco.

Gli articoli mi compaiono in un normale Times New Roman (seconda scelta dopo Minion Pro; seguono il Georgia e, chissà perché, il sans-serif di default). Si notano le parole linkate, che vengono sottolineate in verde e che diventano totalmente verdi al passaggio del mouse.

Alcune frasi dell’articolo vengono impaginate a parte, in Akzidenz Grotesk Extended Bold (anche questo, come gli altri, caricato dal proprio server). Già il font è largo e nero, poi viene impaginato a grandezza 28px su fondo bianco, basterebbe questo per farlo notare. Ma in aggiunta c’è un dettaglio originale: ciascuna lettera è contornata da una linea verde che ne ricalca il profilo. Come si fa? Il trucco consiste nello sfruttare l’opzione text-shadow nei Css. Si tratta dell’ombra che le lettere devono lasciare sullo sfondo. Si può impostare la distanza in pixel della quale si devono scostare lungo l’asse orizzontale e lungo quella verticale, e il colore dell’ombra. Il sito imposta: 1px -1px 0 #0f0. Quindi, al di sotto della lettera in nero, ne viene stampata una uguale ma scostata di un pixel a destra, uno in alto (la y va dal basso in alto) e di colore verde puro (0, 255, 0). Il terzo parametro, che viene impostato a zero, non ho capito a cosa serve. Cambiarne il valore fa sparire l’intero effetto. Ometterlo apparentemente non cambia il risultato.

Ogni lettera può rilasciare varie ombre, e proprio su questo si gioca per ottenere l’effetto alone: infatti, dopo una virgola, il programmatore ne ha aggiunte altre tre. Una è spostata di un pixel a sinistra e uno in alto, l’altra con parametri entrambi negativi (-1px -1px), l’ultima con parametri tutti positivi (1px 1px). Tutte le ombre sono dello stesso colore, quindi si sovrappongono ottenendo quell’aura attorno a ciascuna lettera. Nessuno vieta di fare ombre di colori diversi per ottenere un effetto di diverso genere. Chiaramente l’ultimo colore aggiunto viene coperto da tutti quelli aggiunti precedentemente.

Non mi pare di avere visto altrove questo stesso effetto in uso.