Alla fine dell’articolo “Box liquido con angoli arrotondati” mi enunciavo in una esclamazione:

Questa tecnica ci permette di ottenere la fluidità del box ad un eventuale aumento delle dimensioni del testo, ma presenta la limitazione legata al fatto che se volessimo cambiare colore di sfondo dovremmo per forza lavorare con un software di grafica e modificare il colore delle immagini che generano gli angoli del box; purtroppo non si può avere tutto …

Ebbene, esiste una semplicissima soluzione che permette di ottenere un box fluido con angoli arrotondati e che sia anche facilmente aggiornabile modificando solamente il colore di sfondo del box.

Il tutto si basa sulla fusione della tecnica originaria di Dan Cederholm da cui sono partito, e dalla mia modesta implementazione sull’elasticità del box.

Il concetto è semplice: se con la tecnica di Cederholm si adoperavano delle immagini che nascondono gli angoli del box e danno l’illusione di una curva, però con trasparenza sul box, e nella mia si utilizzano delle immagini che hanno proprio l’angolo arrotondato ma con il resto del colore impostato sul box, allora la fusione delle due metodiche porterà ad un box fluido con angoli arrotondati che sarà anche facilmente colorabile.

Struttura

Il metodo di costruzione di questo box ricalca a pieno il suo precedente esempio, a sola differenza di qualche impostazione

#mainContent{
  margin-top: 3px;
  background:url("box_top_left.gif") top left no-repeat;
  background-color:#9cf;
  width: 99%;
  margin-left: 5px;
  clear: both;
}
#bodyText{
  background: url("box_top_right.gif") top right no-repeat;
  text-align: left;
  padding: 5px 8px;
}
#contentBottom{
  background:url("box_bottom_left.gif") bottom left no-repeat;
}
#innerBottom {

  background: url("box_bottom_right.gif") bottom right no-repeat;
}

Per una comodità di gestione ho mantenuto anche gli stessi nomi degli elementi che ho utilizzato, ma ho evidenziato in grassetto le modifiche. Per prima cosa il nome e le dimensioni delle immagini sono completamente diverse e ho utilizzato delle immagini che presentano un angolo di colore bianco, ma con il “cuore” che crea l’arrotondato tutto trasparente.

Questa scelta mi permette, a patto di avere un <body> bianco, di poter cambiare facilmente il colore di sfondo dei box modificando la proprietà background-color: del div#mainContent, infatti tutto il cuore del sistema è in questa semplice regola.

L’esempio funzionante ci permette di notare come il box presenti degli angoli arrotondati e lo stesso boxè fluido ad un aumento delle dimensioni del carattere, inoltre il colore di sfondo è facilmente modificabili, potendo lavorare solamente su un’unica proprietà.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.