Faire des blocs aux coins arrondis

La mode est à Aqua partout... rien à voir avec le groupe de musique mais plutôt avec le design de blocs aux coins arrondis. Facilement visibles et sympatiques, ils sont souvent utilisés pour mettre en avant un nouveau produit (nouvelle version d'un logiciel par exemple).

Voyons donc comment reproduire ce type d'éléments graphique facilement et surtout proprement.

<div class="block">
   <div class="block_header">
      <h1>Télécharger Firefox 3.0</h1>
   </div>
   <div class="block_content">
      <p>Version windows (30 Mo)</p>
   </div>
</div>

/* commentaire pour rendre visible qu'à IE pour Windows \*/
* html .block_header h1 {height: 1%;} /* Pour IE 5 Windows */

div.block 
{
 margin: 0 auto;
 width: 17em;
 background-image: url(bord-content-d.gif);
 background-repeat: no-repeat;
 background-position: bottom right;
 font-size: 100%;
}

div.block_header 
{
 margin: 0;
 padding: 0;
 background-image: url(bord-header-d.gif);
 background-repeat: no-repeat;
 background-position: top right;
 text-align: center;
}

div.block_header h1 
{
 background-image: url(bord-header-g.gif);
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0;
 padding: 22px 30px 5px;
 color: white; 
 font-weight: bold; 
 font-size: 1.2em; 
 line-height: 1em;
 /* pour safari et firefox CSS3 */
 text-shadow: rgba(0,0,0,.4) 0px 2px 5px; 
}

div.block_content 
{
 background-image: url(bord-content-g.gif);
 background-repeat:no-repeat;
 background-position:bottom left;
 margin: 0;
 padding: 5px 30px 31px;
}

Cette astuce utilise le principe des portes coulissantes : les images utilisées pour les bords gauche et droit sont de largeurs différentes et coulissent les une derrière les autres. De cette façon, lorsque le texte augmente, la largeur du bloc augmente aussi automatiquement.


_{Illustration de l'astuce "Portes coulissantes"}

Bien évidemment, cette astuce a ses limites qui sont en fait celles de la plus grande image utilisée (ici celle de droite).

Pour plus d'informations sur les portes coulissantes, consultez l'article sur A List Apart Sliding Doors of CSS de Douglas Bowman.