Tarlak's World

Tout d’abord un exem­ple de ce à quoi on va arri­ver

La tech­ni­que à met­tre en place est sim­ple, demande peux de code, mais quand même de la patience.

Tout d’abord il faut ajou­ter dans la feuille de style les lignes sui­vante :

/* Pour les images à gauche du texte */
img.curveg {
        float: left;
        clear: left;
        margin: 0 1.33em 0 0;
        height: 15px;
}

/*Pour les images à droite du texte */
img.curved {
        float: right;
        clear: right;
        margin: 0 0 0 1.33em;
        height: 15px;
}

Une fois ceci fait c’est fini… ou pres­que, il faut en effet faire un tra­vail sur l’image pour la quelle nous vou­lons de jolis con­tour. Et le secret réside dans le sim­ple fait qu’il faut décou­per l’image en tran­che qui ont toute la même hau­teur, dans mon exem­ple une hau­teur de 15 pixel (height : 15px;).

Vous aurez donc au final un cer­tain n’ombre de par­tie de l’image, cha­que par­tie ayant une lar­geur varia­ble mais une même hau­teur. Pour mon image en exem­ple voila les quel­ques ima­ges du début

Une fois la découpe de l’image effec­tuée, vous pou­vez rédi­ger un billet dans votre blog, lors­que vous aurez à insé­rer l’image com­plète vous devrez ajou­ter ceci :

///html
<img src="http://adresse/de/votre/imageXXX.png" class="curveg" alt="un descriptif" /> 
<img src="http://adresse/de/votre/imageXXX.png" class="curveg" alt="" />
<img src="http://adresse/de/votre/imageXXX.png" class="curveg" alt="" />
<img src="http://adresse/de/votre/imageXXX.png" class="curveg" alt="" />
<img src="http://adresse/de/votre/imageXXX.png" class="curveg" alt="" />
<img src="http://adresse/de/votre/imageXXX.png" class="curveg" alt="" />

/// Pour infor­ma­tion dans l’exem­ple que je vous ai mon­tré plus haut il faut comp­ter 44 ima­ges au final.

Nous avons pour cha­que ligne dési­gné la class que nous vou­lions uti­li­ser (curveg) afin que l’image soit posi­tion­née à gau­che et que le texte suive la droite de l’image, vous pou­vez bien sur vou­loir décou­per l’image dans l’autre sens afin que le texte suive la par­tie gau­che de l’image à ce moment la rem­pla­cer curveg par curved

Afin de faci­lité l’écri­ture de tou­tes ses lignes je vous con­seil de don­ner le même nom à cha­que tran­che de l’image sui­vie d’un comp­teur :

• ima­ge000.png
• ima­ge001.png
• ima­ge002.png
• ima­ge003.png
• …

Voila c’est tout ce que vous avez à faire,

Points néga­tif

• Cette tech­ni­que demande du temps, pour la par­tie décou­page de l’image.
• Il n’est pas aussi facile d’insé­rer une tel image dans un billet du blog qu’une image clas­si­que
• Ne peut pas être uti­li­ser pour tou­tes les ima­ges (à moins d’être très patient pour les décou­per

Points posi­tifs

• Ajoute un peu de dyna­mise dans la page, enlève cette sen­sa­tion de bloc carré ou rec­tan­gu­laire au niveau des ima­ges.
• Adap­ta­bi­lité de la hau­teur des tran­ches, si on pré­fère des tran­che de 30 pixel il est facile de le faire.