Un cadre redimensionnable en css

Uniquement pour firefox !!!!

Nous allons ici vous expliquer comment créer un cadre redimensionnable à l'infini grâce au css, nous ne parlons pas ici de la propriété css border mais bel et bien d'un cadre que vous aurez au préalable préparer image par image.

L'image et le cadre

Nous allons tout dabord choisir notre image à encadrer et le cadre.
joconde.jpg
Notre image
cadre2.jpg
Notre cadre (cette image est volontairement réduite pour plus de lisibilité)

Préparation du cadre

Il faut maintenant créer chaque coté et chaque coin du cadre. Je vous conseil de n'utiliser qu'un seul coin du cadre et de créer les autres coins à partir de celui-ci (à l'aide des symétries verticales et horizontales de photoshop par exemple), ceci afin d'éviter d'avoir trop de différence de couleur entre les coins et les cotés adjacents. Pour créer vos cotés sélectionnez une partie très fine (proche du coin) dans le sens vertical et une autre dans le sens horizontal. Pour créer les deux cotés qu'il va vous manquer utiliser à nouveau les symétries.

Nous obtenons donc les fichiers images suivants:

hg.jpgHaut gauche
hd.jpgHaut droite
bg.jpgBas gauche
bd.jpgBas droite
hb.jpgHorizontal bas
hh.jpgHorizontal haut
vd.jpgVertical droite
vg.jpgVertical Gauche

Le css

css
.imgGauche {
background:url('vg.jpg') repeat-y; /* on applique le background et on le repete verticalement*/
display:table; /*permet de réduire la taille du div au minimum*/
}
.imgDroite {
background:url('vd.jpg') repeat-y right;  /* on applique le background et on le repete verticalement en le placant à droite*/
}
.imgHaut {
background:url('hh.jpg') repeat-x; /* on applique le background et on le repete horizontalement*/
}
.imgBas {
background:url('hb.jpg') repeat-x bottom; /* on applique le background et on le repete horizontalement en le placant en bas.*/
overflow:auto; /*permet de prendre en compte la hauteur des élément floatant.
}

Le HTML

html4strict
<div class="imgGauche">
	<div class="imgDroite">
		<div class="imgHaut">
			<div class="imgBas">
				<img src="hg.jpg" alt="" style="float:left;"><!-- on place le coin haut gauche -->
				<img src="hd.jpg" alt="" style="float:right;"><!-- on place le coin haut droit -->
				<img src="Joconde.jpg" alt="encadrer une image" style="margin:0 0 0 178px;"><!-- ici 178px est la largeur du bord gauche -->
				<img src="bd.jpg" alt="" style="float:right;"><!-- on place le coin bas gauche -->
				<img src="bg.jpg" alt="" style="float:left;">	<!-- on place le coin bas droit-->			
			</div>
		</div>
	</div>
</div>

Le résultat

encadrer.zip

encadrer une image

maniT4c 02/02/2006 15:39