Corsi on-line

Definire le dimensioni dello sfondo di una viewport con CSS3

CSS3 mette a disposizione due units ad oggi poco utilizzate, ma molto efficaci, per definire l’altezza e la larghezza di un elemento della viewport, cioè dell’area di un browser destinata alla visualizzazione dei contenuti; tali units sono vh per l’altezza e vw per la larghezza e possono essere associate a valori calcolabili percentualmente tramite un semplice principio basato sulle proporzioni.

css

In sostanza, vh (che è appunto un’unità) rappresenta l’1% dell’altezza del blocco iniziale associato ai contenuti, mentre vw è pari all’1% della larghezza dello stesso blocco; per cui, in un esempio come quello seguente:

h3 { font-size: 5vw }

avremo che se la larghezza della viewport è pari a 200mm, la dimensione del font attribuito al tag h3 dovrà essere pari a 10mm, cioè al risultato dell’espressione:

(5x200)/100

La unit vh potrà essere utilizzata anche per riempire il background della viewport attraverso un’immagine; nell’esempio seguente la proprietà height consentirà di estendere l’immagine di sfondo per tutta l’altezza dell’area di visualizzazione, il valore 100vh corrisponde infatti a 100%:

.myviewport
{
background-size: cover;
background-image: url('../immagini/ritratto.png');
height: 100vh;
}

Per quanto riguarda la compatibilità cross-browser e cross-version, le units vh e vw sono supportate da Chorme 20 o superiore, Firefox 19 o superiore, Safari 6 o versioni successive e da Internet Explorer 9 in poi.

Post correlati
I più letti del mese
Tematiche