In un articolo del mese scorso il buon Gianbu ci ha parlato delle unità di misura di CSS3 (se ve lo siete perso potete leggerlo qui ) elencandoci tutte le alternative possibili ai nostro usuali pixel e percentuale.
In questo articolo voglio mostrarvi un pratico esempio di utilizzo delle unità di misura relative, ovvero vh e vw, e per farlo ho deciso di rifare insieme a voi la hero section fullsize del sito di Veneto Formazione. Siete pronti? Si? Ok, facciamolo.
Tanto per cominciare prepariamo una nuova cartella con un file index.html, una cartella css con lo style dove azzeriamo margin e padding via selettore universale e colleghiamo il tutto. Il risultato finale che andremo ad ottenere sarà come quello nella figura che segue.
Andiamo pertanto a prenderci una bella immagine di grandi dimensioni da inserire come sfondo e salviamola nella nostra cartella img
Passiamo quindi a compilare il nostro HTML, di fatto la parte più semplice, dove andiamo a definire una serie di 3 div che chiameremo main, main-content e main-title con all’interno un h1 e un h2
Nel foglio di stile richiamiamo il selettore main e definiamo una larghezza pari al 100% dello spazio disponibile, in questo caso la dimensione del display del device da cui stiamo visualizzando; non utilizziamo 100vw perché su sistema operativo Windows farebbe apparire una fastidiosa barra di scorrimento orizzontale; impostiamo come altezza il valore 100vh.
Come già spiegato nel precedente articolo questo valore ci permette di definire che la nostra immagine di sfondo sia sempre relazionata all’altezza del monitor riempiendo quindi, di fatto, tutto lo spazio disponibile a prescindere.
Carichiamo il nostro sfondo come background e assegnamo la proprietà background-size con valore cover più un paio di prefissi proprietari per evitare refusi.
Andiamo ora a richiamare il main-content per creare il gradiente lineare che ci permetta di posare un overlay sopra la parte dei contenuti testuali per favorirne la lettura ricordando che il valore per assegnare un gradiente a codice non è background-color ma bensì background-image anche se nell’esempio viene usato semplicemente background.
Giochiamo posizionamento e gestione del selettore main-title sfruttando il padding e diamo un pò di formattazione ai nostri marcatori per i titoli come da figura a seguire.
Come possiamo già vedere abbiamo brillantemente e velocemente raggiunto il nostro scopo. Provate a ridimensionare la finestra del browser e vedrete come la nostra immagine di sfondo si accompagni perfettamente al nostro scopo ricoprendo tutto lo spazio disponibile.
A questo punto non ci rimane che sistemare la sezione creata per i dispositivi mobile.
Una scelta possibile può essere quella di lasciare che il valore vh riempia anche in questo caso tutta l’altezza disponibile ma molto più sicuro è ridefinire il parametro dal momento che il testo in uno smartphone potrebbe essere più lungo dell’altezza e creare di fatto un problema di visualizzazione.
Lasciando infatti che sia il contenuto a definire l’altezza possiamo evitare spiacevoli sorprese anche semplicemente nel passaggio da portrait a landscape.
Per farlo ci basta semplicemente, nel break-point solitamente dedicato agli smartphone (max-width: 768px), ridefinire il valore height di main passando da 100vh ad auto. Ridefiniamo ovviamente anche il main-content, che a questo punto serve occupi tutto lo spazio disponibile così da non creare barre di scorrimento, e riposizioniamo centralmente e su nuovi valori di padding i nostri titoli.
E il gioco è fatto, in pochissimi passaggi abbiamo visto un diffusissimo caso di utilizzo, con discreta retro compatibilità, del valore relativo viewport height.
A buon rendere.
Ancora nessun commento