(OverBlog) Encadrer les modules avec des textures

Le CSS permet de réaliser des encadrements, seulement en couleur et carrés (sauf sous FF) et donc sans grande originalité.
Voici comment créer des bordures arrondies et texturées.

1ère étape : vous déterminez la largeur de vos modules.

Dans mon exemple, je choisis 310px, ce qui est très large. En général, c'est plutôt 180px.
Mes bords sont carrés, mais il vous suffit de les arrondir.

Vous allez dans le CSS - Design > Mode CSS, vous rajoutez (au choix)

Pour la colonne de droite de modules

#cl_1_2 {width:310px; }

Pour la colonne du centre de modules

#cl_1_1 {width: 310px;}

Pour la colonne de gauche de modules

#cl_1_0 {width: 310px;}

2ème étape : vous créez le corps du module avec un logiciel de dessin

Il doit avoir une largeur totale de la largeur de vos modules (310px dans mon exemple). Sa hauteur n'a pas beaucoup d'importance, ce fond va se répéter.

Un exemple :



Une fois hébergée, cette image va être placée dans le CSS - Design > Mode CSS :

.box-content {background:url(adresse de l'image); background-position:center;}

Ce qui donne sur le blog :



Si vous constatez que les puces à gauche et les mots à droite mordent sur les bordures, vous rajoutez des marges intérieures :

.box-content {background:url(adresse de l'image); background-position:center;padding-left:18px;padding-right:25px;}

et voici :



3ème étape : vous créez l'entête du module

Elle doit toujours faire la même largeur que le module (310px). Par contre, elle devra être haute de 20px : 2* la largeur de la bordure, car nous allons faire un retour vers le bas.

Ainsi :



Une fois hébergée, cette image va aussi être placée dans le CSS - Design > Mode CSS :

.box-titre {background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Pour ce résultat :



Pour que le titre du module soit sous la bordure, on rajoute une marge :

.box-titre { background-image:url(adresse de l'image);padding-top:60px; }

4ème étape : vous créez le pied de module

Côté conception, c'est tout simple. Il suffit sur sur logiciel de dessin, de faire une rotation de 180° de l'entête.

Le voici donc :



Une fois hébergée, cette image va suivre les autres dans le CSS - Design > Mode CSS :

.box-footer h2 {background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Il se peut qu'il faille ajouter une hauteur à ce pied de module :

.box-footer h2 {background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;height:20px;}

Voilà, ce n'est pas bien difficile, il faut seulement être attentif et précautionneux.



Si vous êtes en mode avancé, pensez à répéter l'action dans tous vos CSS.