Nell’era del web 2.0 ormai vogliamo arrotondare di tutto vero? :)

Ma come fare? Dobbiamo per forza utilizzare fastidiose tabelle per inserire le solite 4 immagini per fare le curvature?

Assolutamente no!

In questo esempio vedremo come rendere un box arrotondato con DIV e CSS senza immagini

  • Inseriremo questo codice nella pagina HTML nel punto dove vogliamo il nostro box:<b class="rtop">
    <b class="r1"></b>
    <b class="r2"></b>
    <b class="r3"></b>
    <b class="r4"></b>
    </b>
    <!-- qui il contenuto effettivo -->
    <div class="testo"><strong>Questo è un esempio di un box con bordi arrotondati senza immagini</strong></div>
    <b class="rbottom">
    <b class="r4"></b>
    <b class="r3"></b>
    <b class="r2"></b>
    <b class="r1"></b>
    </b>
  • Nel nostro CSS invece:
    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}
    .testo{background: #76C2FA; color:#FFFFFF; font:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center}

La struttura consiste nel suddividere il box in strisce al fine di ottenere la curvatura.

Guarda l’esempio

Letture Consigliate per ABC

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.