Grazie a Sanremo ho rifatto le foto verticali
Grazie a Sanremo, in particolare alla lunghissima performance dei Pooh, ho rimesso mano al sito e rifatto le immagini verticali.
Come al solito, il vecchio sano, solido CSS ha fatto il grosso del lavoro. I Pooh hanno fatto il resto.
Maledetta noia Maledette foto verticali
Nel mio blog fatto in casa, tra le tante cose che avevo da aggiustare, c'erano le immagini verticali.
Qual era il problema? Col fatto che le immagini vengono limitate solo orizzontalmente,quando avevo delle immagini verticali avevo un simpatico effetto di immagini larghe larghissime.
Qui sotto un esempio.
Foto verticale un po' invadente. Saluti agli amici troppo forti dell'Hotel Ristorante Liberty di Pattada
Per carità, la foto si vede. Certo che se da telefono è 😒, da desktop è 😩😩😩
Qui sotto uno screenshot di come si vede da desktop:
Effettivamente un po' ingombrante.
Soluzione tampone
Solitamente per ovviare questa situazione avevo un escamotage grafico: duplicavo la foto e sopra se stessa, sfocavo la versione sul retro e croppavo tutto.
Più facile da far vedere che da spiegare a parole:
Escamotage fatto con il gioco di immagine doppiata e croppata.
L'ultima volta che ho provato a fare questo giochino dello sfondo dal telefono mi sono detto che in fondo non era così difficile da farlo via CSS.
Quale migliore occasione di Sanremo.
Questa è la versione fatta in CSS:
Tadaaa. E senza ritoccare la foto! 🥳
Come ho fatto
In breve, lo sfondo lo faccio con uno pseudo elemento, sfocato, che ha come sfondo un data attribute del tag figure.
Così l'HTML:
<figure class="c-block [altre classi]"
style="--bg-image: url('[URL dell'immagine]');">E poi riprendo la custom property sul CSS:.c-block__figure--vertical:before {
position: absolute;
left: 1px;
top: 1px;
display: block;
height: 100%;
width: 100%;
content: "";
background-image: var(--bg-image); // ⬅️ qui
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
filter: blur(10px);
opacity: 0.8;
}
Un ringraziamento a Amadeus e il suo profilo Instagram, Gianni Morandi, Blanco e le fioriere, Chiara Ferragni e tutte le persone che hanno lavorato attivamente a questa prima serata del Festival di Sanremo.
