Angoli smussati in un box coi Css

Autore: Luca Ruggiero | Tell a Friend

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>

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

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Indispensabili per Webmaster
» Effetto ombra su testo con Photoshop
» Errore 80004005: Cannot update. Database or object is read-only
» Generare password casuali in Javascript
» Guadagna col tuo sito grazie a TradeDoubler
» Guida XHTML
» HTTP 500 internal server error
» Introduzione ad Ajax ed Asp con Jscript
» Le espressioni regolari in Javascript
» Referenze dei fogli di stile Css
» Referenze dei Tag Html
» Riavviare IIS
» Riscrivere le URL con Asp
» Stringhe di connessione via ODBC e OleDB
» Tool free per il calcolo del codice fiscale sul tuo sito!