Creare box con angoli arrotondati
Una delle esigenze di design più comuni è certamente quella di creare box con angoli arrotondati, superando quel tipo di grafica squadrata - tipica soprattutto dei comuni design di tipo tabellare - cui il web ci ha abituato sin dalle sue origini.
Inserire elementi arrotondati, infatti, crea effetti visivi gradevoli e più "morbidi" e rappresenta una soluzione semplice ed efficace per marcare determinate aree della nostra pagina web.
Per fare ciò vi invito, innanzitutto, a munirvi di una semplice immagine che rappresenti il box che vogliamo creare.
Potete realizzarla semplicemente utilizzando un comune programma di grafica. Nel mio caso userò Photoshop.
Ecco l'immagine che ho creato: è un semplice box color verde con angoli arrotondati, bordo marcato ed un poco di effetto ombra esterna.
div.box-alto
{
width: 300px;
background-image: url('alto.gif');
background-repeat: no-repeat;
background-position: left top;
padding-top: 20px;
}
div.box-medio
{
width: 300px;
background-image: url('medio.gif');
background-repeat: repeat-y;
}
div.box-basso
{
width: 300px;
background-image: url('basso.gif');
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 20px;
}
div.box-testo
{
margin: 0px 10px 0px 10px;
}
Mentre nel codice della nostra pagina HTML scriveremo:
<div class="box-alto">
<div class="box-basso">
<div class="box-medio">
<div class="box-testo">
Scrivi qui il tuo testo...
</div>
</div>
</div>
</div>
In sostanza abbiamo creato una struttura di 4 div nidificati (3 per la struttura grafica del box ed uno per il testo) che, grazie ad un attento utilizzo di background-position e del padding rende possibile creare un box ad effetto con poca fatica.Di seguito uno screenshot del risultato grafico ottenuto:
