Angoli smussati... senza usare immagini!

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Ogni Web designer ha il problema di creare layout interessanti ed accattivanti ma che siano al tempo stesso il più leggeri, accessibili, usabili e navigabili possibile... una combinazione che non lascia spazio a scelte diverse da un forte utilizzo dei CSS!

L'oggetto di questo Articolo è particolarmente incentrato sul Web design: tratteremo il tema angoli smussati creando un box accattivante senza utilizzare immagini ad effetto arrotondato, ma solo codice CSS!!!

Riprodurremo fedelmente una barra composta da piccoli layer creati e disposti ad hoc in modo da restituire l'effetto descritto fino ad ora e come descritto nell'immagine seguente:

Diamo un occhio al codice HTML dell'esempio in cui vediamo chiaramente dei layer vuoti a cui vengono assegnate delle classi:

<div class="BORDI">
    <span class="TOP">
        <span class="RIGA1"></span>
        <span class="RIGA2"></span>
        <span class="RIGA3"></span>
        <span class="RIGA4"></span>
    </span>
</div>
<div class="CONTENUTO">
    <b>MRW Corsi</b><br><br>
    Corsi professionali per Webmaster, Programmatori,
    Grafici e tecnici del comparto IT!!!<br><br>
    <a href="http://www.mrwcorsi.it">www.mrwcorsi.it</a>
</div>
<div class="BORDI">
    <span class="BOTTOM">
        <span class="RIGA4"></span>
        <span class="RIGA3"></span>
        <span class="RIGA2"></span>
        <span class="RIGA1"></span>
    </span>
</div>

Di seguito il codice CSS opportunamente commentato:

/* STILIZZAZIONI DI BASE DELLA PAGINA */

body
{
    background-color: #FFFFFF;
}
div
{
    font: Normal 10px Verdana;
}
a
{
    color: #FFFFFF;
}

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI
{
    width: 120px;
}
div.CONTENUTO
{
    background-color: #FF6600;
    color: #FFFFFF;
    width: 120px;
    padding: 5px;
}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM
{
    display: Block;
    background-color: #FFFFFF;
}
span.TOP span, span.BOTTOM span
{
    display: Block;
    overflow: Hidden;
    background-color: #FF6600;
    height: 1px;
}
span.RIGA1
{
    margin: 0 5px;
}
span.RIGA2
{
    margin: 0 3px;
}
span.RIGA3
{
    margin: 0 2px;
}
span.TOP span.RIGA4, span.BOTTOM span.RIGA4
{
    margin: 0 1px;
    height: 2px;
}