Bordure texturée en CSS

L'attribut border des feuilles de style peut varier en couleur et en largeur, mais il n'est pas prévu de lui attribuer une texture. Cependant, il suffit d'une règle CSS pour ajouter cet effet graphique.

La règle s'applique à la balise fieldset conçue pour créer un cadre, et nous nous allons lui ajouter une texture.
On pourrait faire de même avec un calque, mais l'avantage de fieldset est, tout au moins sous Firefox, d'obtenir des coins arrondis.

Le principe consistera à attribuer une texture au cadre tout entier et placer dedans soit un autre fieldset (pour les bords arrondis) soit un div, dont le fond soit le même que celui de la page.

<fieldset>
    <fieldset class="inner">
        ... texte ...
    </fieldset>
</fieldset>

On peut incruster un titre dans la bordure comme dans la démo.

<fieldset  style="width:500px">
    <span class="btitle">Titre</span>
    <fieldset class="inner">
    ... texte ...
    </fieldset>
</fieldset>

La feuille de style règlera les marges. Pour avoir des coins arrondis, on ajoute cet attribut:

-moz-border-radius:8px;	
border-radius:8px;

Pour avoir un fond blanc en mode d'édition WYSIWYG, on peut utiliser une image de fond de 1 pixel de couleur blanche.

.inner
{
  background:url(white.gif);
}

Cas d'une image

Dans le cas d'une image, les coins arrondis ne sont plus souhaitables pour le cadre intérieur, on changera le style du <fieldset> ou l'on utilisa un <div> comme ci-dessous:

<fieldset class="wood" style="width:276px">
    <div class="imgback" style="padding:0;height:400px;width:258px" 
         border="0" >
        <img src="images/20.jpg" />
    </div>
</fieldset>

Il faut ici spécifier la largeur du cadre extérieur (wood) et aussi la taille du cadre intérieur (imgback), ceci, en tenant compte des marges.

Démonstration de bordure texturée

Exemple avec un texte:

Démonstration d'une boite de texte dont la bordure est une texture.

Différents effets sont envisageables:

Briques.
Bois.
Métal.
etc...

A choisir selon le design du site.

Incrustation d'un titre:

Bordure texturée

Démonstration d'une boite de texte dont la bordure est une texture.

Différents effets sont envisageables:

Briques.
Bois.
Métal.
etc...

A choisir selon le design du site.

Exemple avec une image:

Buildings

Code avec le titre:

<fieldset class="wood" style="width:276px">
<span class="ititle">Buildings</span>
<div class="imgback" style="padding:0;height:400px;width:258px" 
    border="0" >
<img src="images/20.jpg" />
</div>
</fieldset>