Box fluido con angoli tondi

Autore: Tutorialissimo
Visite: 376
Voto: 0 / 4 ( voti: 0 )

Prima di iniziare mi sembra doveroso dire che con cross browser intendo che il box funziona con Explorer 7.0 (non garantisco il funzionamento con versioni precedenti), Firefox 2.0, Safari 3 e Opera 9.25 che, per quanto ne so, sono i browser più diffusi oggi

Bene dopo questo doveroso appunto, siamo pronti per cominciare, ecco qui cosa realizzeremo.
Innanzitutto con Photoshop (o qualunque altro programma di grafica) creiamo quattro diverse immagini che saranno gli spigoli del nostro box, in questo modo:

Questo è tutto il codice HTML necessario:

<div id="box">
<div id="sup_left"></div><div id="sup_right"></div>
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat….</p>
<div id="inf_left"></div><div id="inf_right"></div>
</div>

E’ molto semplice, si tratta di 5 elementi div, quattro dei quali sono dentro un div principale chiamato box e costituiscono l’appoggio per posizionare le immagini degli spigoli. Come ben sappiamo se intendiamo usare questo stesso box più volte nella medesima pagina dobbiamo sostituire gli attributi id non l’attributo class e nei selettori del CSS, che vedremo tra poco, il carattere # con il punto.