In questo tutorial vediamo come fare a creare una serie di quadrati che si ridimensionano automaticamente, utilizzando solo i nostri amati HTML e CSS.
Utilizzeremo un approccio full-fluid, assegnando quindi ai quadrati delle dimensioni in percentuale. Variando le percentuali a seconda dello “step” di media queries che ci interessa, otterremo quadrati più o meno grandi a seconda del device su cui ci troviamo.
L’operazione che andiamo a fare è relativamente semplice, l’unica “pecca” è che avremo uno step, nell’annidamento degli elementi, semanticamente inutile. Ma sono convinto che Google sopravviverà anche con un div in più senza odiare troppo il nostro layout! Bando alle ciance, andiamo al sodo della questione.
Nota dedicata ai browser, quanto segue si vede senza problemi su tutti i browser moderni, per quanto riguarda IE dalla versione 8 in su non abbiamo problemi.
La struttura HTML
La struttura di ogni quadrato, sarà la seguente. Niente di strano come possiamo vedere:
<div class="square-box">
<div class="square-content">
<div>
<span>Duis dolor leo, interdum in lectus sed, rhoncus mollis massa. Sed congue augue tincidunt.</span>
</div>
</div>
</div>Se questa struttura risulta semanticamente noiosa, di contro possiamo gestire comodamente gli spazi ed il posizionamento, ad esempio verticale, di testi e immagini. Nel codice ho inserito un box singolo, ne va da sè che con un quadrato il tutto abbia poco senso! Per l’esempio, affinchè sia comprensibile il CSS, ipotizzeremo di voler tenere 3 box quadrati per ogni riga.
Il CSS
In primis, impostiamo il box model settando la proprietà box-sizing su border-box, poi procediamo con il resto come segue:
*, *:before, *:after {
padding: 0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.square-box {
position: relative;
width: 33.333333%;
overflow: hidden;
float: left;
}
.square-box:before {
content:"";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
color: white;
background: #4679BD;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
padding: 1em;
overflow: hidden;
}Che cosa ci interessa di tutto ciò? Con square-box decidiamo di fatto la larghezza del nostro contenitore per il quadrato. Impostando 33.3333% potremo allineare massimo 3 quadrati per riga. Il padding-bottom al 100% assegnato a .square-box:before, permette di ottenere il quadrato, posizionando quindi .square-content in absolute con top,bottom,left,right assegnati, facciamo in modo che occupi tutto lo spazio a disposizione.
La dimensione assegnata a questi 4 attributi di fatto coincide con la spaziatura che il quadrato “interno” ha con quello esterno. Ottimo per creare quindi spazi bianchi tra i quadrati e non lasciare tutto attaccato!
Infine, affinchè sia possibile centrare verticalmente i testi come nell’esempio, sarà necessario dichiarare le proprietà display:table e table-cell.
Niente di complesso insomma, ma il risultato è garantito!
PS: Come detto all’inizio, variando la larghezza di .square-box con le media queries, dimensioneremo i quadrati diversamente a seconda della risoluzione in cui si trova il nostro dispositivo (desktop, tablet o smartphone che sia!)
Live Demo: Ecco il risultato
Stringi lo schermo per vedere il risultato!
