Angoli smussati... senza usare immagini!
Articolo scritto da Luca Ruggiero
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!!!
(L'articolo continua più sotto...)
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:
<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;
}
