Cell. +39 3479684755
Il Blog di Instant Websites
Box reattivo centrato orizzontalmente e verticalmente nella viewport
Prima dell’avvento del web responsive (o reattivo che dir si voglia), per centrare un box orizzontalmente e verticalmente nella viewport era innanzitutto necessario definirne le dimensioni (larghezza ed altezza), indi posizionarlo in modo assoluto come segue:
#box { width:600px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-300px;}
Dopo avere dunque impostato una posizione top e left pari al 50%, è indispensabile correggerla applicando dei margini negativi superiore e sinistro pari ciascuno a metà della corrispondente dimensione del box.
In questo modo a risultare centrato nella viewport non è il punto superiore sinistro del box bensì il suo punto centrale, ottenendo l’effetto desiderato.
Per visualizzare un esempio di questa tecnica, clicca qui.
Se non conosciamo a priori larghezza ed altezza del contenitore, possiamo utilizzare la proprietà CSS3 transform con la funzione translate() che, come noto, riposiziona l’elemento spostandolo gli assi orizzontale e verticale.
Le trasformazioni CSS3
I CSS3 (Cascading Style Sheets versione 3) hanno introdotto la proprietà transform e, come relativo valore, alcune funzioni che consentono la trasformazione degli elementi a cui vengono applicate, ottenendo così degli effetti visivi che fino ad oggi avrebbero richiesto l’utilizzo di Flash o di Javascript.
Questa funzioni sono quattro: scale(), rotate(), skew() e translate().
I relativi esempi applicati ad un’immagine si trovano in questa pagina.
A ciascuna immagine, identificata tramite id, è stato applicato un collegamento ipertestuale (con href=”#” per attivare l’hyperlink senza dovere specificare una destinazione), dopo di che è stata applicata la proprietà transform alla pseudoclasse dinamica :hover (vedi più sotto per esaminare il codice).
Si osservi che l’effetto ottenuto con la trasformazione non influenza in alcun modo gli altri elementi della pagina, il cui posizionamento resta invariato.
scale()
La funzione scale() permette di ridimensionare l’elemento a cui è applicata la proprietà transform sulla base di un fattore di scala numerico: 1 equivale al 100% della dimensione originale, quindi un numero >1 determina un ingrandimento e un numero <1 determina un rimpicciolimento: ad es., 1.2 indica un aumento delle dimensioni del 20%.
Se viene specificato un solo fattore, questo viene applicato sia orizzontalmente sia verticalmente; ne possono essere indicati due diversi, in tal caso il primo sarà il fattore di scala orizzontale ed il secondo quello verticale.
Nell’esempio pubblicato, il codice CSS è il seguente:
a:hover img#foto1 {
transform: scale(1.1);
}
che comporta un ingradimento del 10% su entrambi gli assi, come è logico che sia per evitare una distorsione dell’immagine.