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

• Bordure texturée pour un texte ou une image.
• Voir la feuille de style.
• Image de fond blanc, de 1 pixel.
  

(c) 2009 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.