In molti mi chiedono come poter creare degli angoli arrotondati utilizzando solamente CSS, fino a poco tempo fa conoscevo la classica tecnica di inserimento degli angoli come immagini di sfondo all’interno di elementi opportunatamente posizionati.
Altri invece utilizzano il metodo border-radius di Mozilla, che ovviamente funziona solo con i browser come Firefox, Netascape e Mozilla.
Da un paio di giorni però ho scoperto un’altro metodo molto efficace.

E’ da premettere che questa soluzione non funziona con Internet Explorer 5.0.2 per Mac, colpa di alcune mancanze e bug di quest’ultimo.

Detto questo iniziamo con le presentazioni. La tecnica è stata trovata su Spiffy Corners ed è veramente carina, ma analiziamola.

Cliccando su “Show Me the Code” verrà visualizzato tutto il codice CSS e XHTML. Partiamo da quest’ultimo:

<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b> <div class="spiffy_content">
<!-- Your Content Goes Here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

Come si vede ci sono una serie di tag <b> tutti con classi differenti e nel centro di questi tag c’è un’elemento div per il contenuto.
Osservando con più attenzione si nota che i tag <b> si riflettono sopra e sotto proprio come uno specchio.

Adesso quindi dobbiamo guardare il CSS magico:

.spiffy{
display:block
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6
}

Allora, questa parte non fa altro che far diventare dei division block, i tag <b> con la classe spiffy. Poi a tutto il loro interno, oltre che rifare la stessa cosa, setta un’altezza di 1 pixel, gli da un background e setta l’overflow su hidden.

.spiffy1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.spiffy5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}

Questa è la vera magia, qui vengono date le regole ad ogni “strisca” (il tag <b>) di un pixel, che da sinistra verso destra vengono create.

Quindi, ogni striscia ha un suo padding e un suo margin in modo da retrarla abbastanza da creare ogni singola parte dell’angolo.
Da notare che viene assegnato un bordo sia a destra che a sinistra di un colore più chiaro in modo da ricreare l’effetto antialiasing.

.spiffy_content{
padding:0px 5px;
background:#0a67e6;
}

Per ultimo, il contenuto con il suo background e il suo padding.

Ovviamente questa soluzione è un pò complessa e richiede un bel po’ di tempo per realizzarla a mano, ma con lo strumento di Spiffy Corners è veramente un’attimo.. e volendo si potrebbero pure creare delle parti sfumate o con un background.. ma lascio a voi l’immaginazione.