Menu di navigazione:
Scarica il codice HTML e CSS

Box liquido con angoli arrotondati: esempio completo

Titolo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc at sapien in metus vulputate hendrerit. Nullam hendrerit mauris non lacus feugiat facilisis. Aliquam non turpis. Nullam et arcu sed nunc bibendum vestibulum. Curabitur accumsan tincidunt lorem. Quisque quis elit.

Inizia il tutorial

In questo esempio mostreremo come realizzare, a partire da una semplice struttura a div in (X)HTML, box fluidi con angoli arrotondati facendo uso esclusivo dei CSS2.
Per garantire l'allargamento del box in relazione alla dimensione della finestra del browser e della grandezza dei caratteri (non conosciamo a priori la distanza che intercorre tra gli angoli arrotondati) utilizzeremo 4 immagini separate e indipendenti che ci serviranno rispettivamente per realizzare l'angolo superiore sinistro, l'angolo superiore destro, l'angolo inferiore destro e l'angolo inferiore sinistro.

La struttura (X)HTML per la realizzazione del nostro box prevede: un div contenitore (<div id="container">...</div>), e tre box ausiliari che abbiamo chiamati rispettivamente "gancio1", "gancio2" e "gancio3" il cui scopo è fornire un 'gancio' (un supporto) per le immagini di sfondo che disegnano gli angoli.

Tale soluzione, che non è l'unica, seppur richieda un codice ridondante, mantiene inalterati i vantaggi derivanti dall’utilizzazione dei CSS2. Nel tutorial successivo verrà utilizzata una struttura e una tecnica leggermente differente per realizzare box fluidi con ombra.

(X)HTML:

<div id="container">
 <div class="gancio1">
  <div class="gancio2">
   <div class="gancio3">
    <h4>Titolo</h4>
    <p> Lorem ipsum dolor sit amet...
   </div>
  </div>
 </div>
</div>

Inizia il tutorial

Riferimenti

Creare box ad angoli curvi con i CSS [link esterno]
su extrowebsite.com

Angoli arrotondati con i CSS [link esterno]
su html.it

Simple Rounded Corner CSS Boxes [link esterno]
su modxcms.com

CSS Design: Creating Custom Corners & Borders [link esterno]
su alistapart.com

torna su