Web Design  »  Articoli  »  Web design 

Gli angoli arrotondati sono spesso un tema caldo del web design, e credo che ci siano centinaia di articoli ad esso dedicati. Molte delle tecniche presentate richiedono markup aggiuntivo o una particolare struttura del contenitore che vogliamo arrotondato. E soprattutto, richiedono l'uso di immagini.

È uscita un po' di tempo fa una tecnica per ottenere gli angoli arrotondati senza l'uso di immagini... L'altro giorno, rileggendola, mi sono chiesto: ma ci sarà un modo per fare le cose un po' più semplici?

E così eccomi qui a presentare in esclusiva l'idea a cui sono arrivato. Iniziamo subito.

Anatomia di un angolo arrotondato

L'idea è nata osservando un angolo arrotondato senza antialias, che si presenta cioè "a scalini". Ecco un'immagine di un angolo arrotondato superiore sinistro ingrandita:

La soluzione

Osservando un angolo arrotondato, ho pensato: ma se lo suddividessi a strisce? E così l'idea ha preso forma: inserire nell'elemento da arrotondare alcuni elementi HTML aggiuntivi per ottenere la "scalettatura" necessaria. Vediamo il codice:

<div>
  <b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
</b>
<!-- qui il contenuto effettivo -->
<b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
</b>

Da notare come nel b class="rbottom" i quattro b interni hanno un ordine invertito rispetto a quelli del b class="rtop".

Ora vi chiederete: ma perchè proprio l' elemento <b>? Per alcune semplici ragioni: b è un elemento Capire il box model, e quindi può essere inserito in qualsiasi altro elemento HTML. Inoltre b è un tag molto breve, e non ha nessun significato Scrivere codice HTML semantico, proprio come lo span, come afferma anche Eric Meyer.

Ora veniamo al CSS, che è davvero semplice:

b.rtop, b.rbottom{display: block; background: #FFF}
b.rtop b, b.rbottom b{display: block; height: 1px;
    overflow: hidden; background: #76C2FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}

In sostanza, prima e dopo del contenuto effettivo vengono aggiunti due elementi b (con classe rtop e rbottom) che contengono quattro linee alte 1 o 2 pixel che hanno lo scopo di realizzare la scalettatura per gli angoli arrotondati grazie ai margini.

Ai due b principali viene assegnato il colore esterno agli angoli arrotondati, mentre ai b interni viene attribuito il colore di sfondo dell' elemento che si vuole arrotondare.

Altri articoli

Altre guide

Altre newsletter