Box Piatto con i CSS

Box Piatto con i CSS

i codici seguenti servono per rendere arrotondati gli spigoli di una finestra piatta usando i css invece delle tabelle. Si tratta semplicemente di tag DIV inseriti uno dentro l'altro con l'impostazione dello sfondo posizionato con le classi. Questo codice è adatto ad una finestra dalle dimensioni elastiche sia in larghezza che lunghezza. Clicca qui per vedere l'esempio.
Si intende che gli angoli arrotondati siano già stati preparati con un programma di grafica.

Inserire il codice nel foglio di stile:

.contenitore { /*div che contiene tutto */
width: 100%;   /*si ottiene una finestra di dimensioni massime, modificabile a piacere*/
background-color: #FFFF99;} /*inserire qui il colore di fondo della finestra*/

.topleft { background: url(immagine angolo sup sinistro) no-repeat top left }

.topright { background: url(immagine angolo sup destro) no-repeat top right }

.bottomleft { background: url(immagine angolo inf sinistro) no-repeat bottom left }

.bottomright { background: url(immagine angolo inf destro) no-repeat bottom right }

.contenuto { padding: 10px;} /*è il div che contiene il testo della finestra, si può personalizzare  a piacere */
 

Inserire il seguente codice nelle pagine html:

<div class="contenitore" >
<div class="topleft">
<div class="topright">
<div class="bottomleft">
<div class="bottomright">
<div class="contenuto">
<p>testo da inserire</p>
</div>
</div>
</div>
</div>
</div>
</div>

[torna su]