The Daily Beast. Impostare i Css in maniera creativa

The Daily Beast è un sito di informazione politica americano che cerca di essere il più possibile irritante per uno dei due schieramenti.

Dal punto di vista dell’impaginazione però è interessante perché mette in atto soluzioni creative e allo stesso tempo semplici da realizzare, sfruttando i css. 

I titoli principali sono impaginati in Druk (anche in italico), un font disegnato da Berton Hasebe nel 2014, venduto solo sul sito di Commercial Type. Qui viene attinto dal proprio server. 

Identifont lo conosce, ma non può mostrarne l’anteprima.

È un sans-serif compresso, dove la lettera O ha lunghi tratti verticali. Sul lato esterno, sopra e sotto, c’è anche qualche breve segmento orizzontale.

La soluzione è tipica della stampa scandalistica, dove si richiede un font che sia più grande possibile per quanto riguarda la dimensione, ma che permetta di inserire il maggior numero di parole sulla stessa riga, avendo le lettere molto strette.

Ma l’originalità del sito sta in una serie di dettagli mai visti altrove.

Prima di tutto, il titolo di apertura è incorniciato in un rettangolo che lascia un’ombra in basso e a destra. E visto che oggi il titolo è su due righe, i rettangoli sono due, attaccati tra di loro. Con l’ombra della prima riga che non finisce davanti al rettangolo della seconda riga.

Come l’hanno fatto? Grazie ad alcune impostazioni stilistiche facilmente accessibili coi css. Una è

border: 1px solid #02141f;

e l’altra è  

box-shadow: .3rem .3rem #02131f; . 

In quest’ultima istruzione, il primo numero determina lo spessore dell’ombra sulla destra, il secondo quello dell’ombra in basso, in proporzione al valore di riferimento della pagina. Lo spessore del bordo invece è in valore assoluto, in pixel. I numeri col cancelletto rappresentano il colore dei due elementi.

Solid è lo stile del bordo. Le altre possibilità disponibili sarebbero: dotted, dashed, inset, outset, ridge, groove, double e hidden, oltre a none. Scegliendo una di queste comunque l’ombra resterebbe invariata.

Ma non basta. Per mettere a punto l’effetto servono altre tre istruzioni.

Prima di tutto c’è  

background: #fff;

senza la quale l’ombra del rettangolo della riga superiore andrebbe a finire sul rettangolo della riga inferiore. Poi c’è 

box-decoration-break: clone;

disattivando la quale i rettangoli perdono il bordo in cui si va a capo. In pratica il rettangolo che racchiude la prima riga resta aperto sul lato destro, mentre quello dell’ultima resta aperto sul lato sinistro. In caso di titolo su tre o più righe, quelle centrali restano aperte da entrambi i lati.

E soprattutto c’è l’opzione 

display: inline;

senza la quale ci sarebbe un solo grande rettangolo intorno a tutte le righe del titolo, anziché uno per ogni riga.

Un altro effetto strano riguarda una parola che viene aggiunta in rosso per specificare il titolo o commentarlo in maniera forzatamente ironica (tipo “Ora su Netflix”, oppure “Si torna a scuola”): è scritta obliquamente, in salita. E non è un’immagine, ma testo selezionabile.

Si può scrivere in salita in una pagina web?!?

Sì! Sempre lavorando coi css, ed è facilissimo: c’è l’opzione 

transform: rotate(-3deg); 

che gira il tutto in senso antiorario di 3 gradi, in questo caso.

In più hanno aggiunto 

border-left: .1rem solid #f00606; 

e lo stesso per border-right. Questo fa comparire due sottili trattini verticali all’inizio e alla fine della parola (verticali in condizioni normali; qui la riga è ruotata, quindi ruotano anche loro).

Insomma, si tratta di soluzioni semplici da realizzare, ma di grande effetto.

Altri titoli più piccoli sono in Druk Text, stessa famiglia del font principale ma con lettere più larghe.

Nulla da dire per i testi degli articoli, che sono in Georgia, Times, Times New Roman, serif, ossia nei font di sistema di ciascun utente.