Menu di navigazione:
Scarica il codice HTML e CSS

Box fluido con angoli arrotondati e ombra: 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.

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.

Inizia il tutorial

La tecnica presentata nel tutorial precedente non permetteva di aggiungere un effetto ombra al box. In questo esempio mostreremo come, a partire da una semplice struttura a div in (X)HTML, realizzare box fluidi con angoli arrotondati e effetto ombra facendo uso esclusivo dei CSS2. La tecnica utilizzata per caricare e far scorrere le immagini di sfondo è simile alla tecnica delle Sliding Doors per i menù di navigazione.
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 il lato superiore sinistro, il lato superiore destro, il lato inferiore destro e il lato inferiore sinistro.

La struttura (X)HTML per la realizzazione del nostro box prevede:

Si noti che tale soluzione tenta di sfruttare gli elementi già presenti nel codice (X)HTML limitando la proliferazione di codice ridondante.

(X)HTML:

	
<div class="container">
 <div class="head">
  <h4>Titolo</h4>
 </div>
 <div class="body">
  <p>Lorem ipsum dolor sit amet....</p>
  <p>Lorem ipsum dolor sit amet....</p>
 </div>
</div>

Inizia il tutorial

Riferimenti

"Sliding Doors" Box- Rounded Corners for All [link esterno]
su vertexwerks.com

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

torna su