Angoli smussati in un box coi Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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;
}

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.937)

:: Referenze dei fogli di stile Css (41.900)

:: Menu ad effetto mouseover con i Css (39.300)

:: Effetti sui link con i Css (30.301)

:: Testo verticale coi Css (20.102)

:: Box con effetto ombra con i CSS3 (16.391)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.291)

:: Stilizzare i form Html con i Css (16.111)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.893)

:: Colorare le barre di scorrimento del browser con i Css (14.400)

IN EVIDENZA
DOWNLOAD