[CSS] Marges courbes : derniers mots

Vous avez bien lu :  derniers mots . Cette fois-ci on va placer la poire à droite plutôt qu'à gauche. C'est presque pareil, tout gît dans le  presque . À titre exceptionnel, le texte de cet article est justifié pour que vous voyiez bien qu'il suit les contours en escalier quand il y en a.

On commence de la même manière : l'image (120x150 pixels) étant calée à droite, on cherche à éliminer le plus possible de pixels transparents sur le côté gauche du motif. La largeur de chaque lanière est indiquée sur la figure, notez que la 1ère lanière n'est pas rognée du tout (simplement parce que la poire est cadrée au plus juste)

 .laniere {float:right; clear:right; height:15px; background-image: url(http://gnagnagna/PoireArty.png) } 

 

Ensuite on retouche le petit bout de CSS et on prépare cinq spans, toujours comme la fois précédente.

       

Leur background-position va de 0 0 à 0 -120px par pas de 30px et, dans un premier temps, on donne le même width:120px à tous les spans. Voyez le résultat : une image correcte mais contenue dans un rectangle.

Pourquoi ne pas mettre tout de suite les bonnes largeurs ?

         

Parce qu'on obtiendrait ça :

Réfléchissez : la 1ère coordonnée de background-position est toujours 0, l'image de fond est toujours calée contre le bord gauche de son span. Mais on a rétréci ce span pour éliminer les pixels transparents de gauche, il a donc glissé vers la droite. Au total ces pixels transparents sont présents deux fois : une fois dans la diminution de width et une deuxième fois dans l'image de fond.

         

Bon, ce n'est pas insurmontable : il suffit de retoucher background-position pour décaler l'image de fond de chaque lanière vers la gauche, diminuer sa première coordonnée (X) du nombre exact de pixels dont on a diminué le width de cette lanière. Résumé :

n°1	style="width: 120px; background-position :     0       0"
n°2	style="width: 116px; background-position :  -4px  -30px"
n°3	style="width: 115px; background-position :  -5px  -60px"
n°4	style="width: 109px; background-position : -11px  -90px"
n°5	style="width: 100px; background-position : -20px -120px"

Voilà toute la différence entre image à gauche et image à droite : il faut décaler les images de fond à la verticale et à l'horizontale.

---

           

Tant qu'il est chaud, battons le fer : comment s'y prendre pour avoir une marge courbe à droite et une à gauche ? Pour ce que vous êtes en train de lire, j'ai utilisé une approche  naïve  : écrire d'abord tous les spans de gauche puis tous ceux de droite. Bien sûr chacun est doté de la bonne classe, le code HTML ressemble à ça :

 <span class="laniereG" style="width:130px">&nbsp;</span> <span class="laniereG" style="width:100px">&nbsp;</span> <span class="laniereG" style="width: 70px">&nbsp;</span> <span class="laniereD" style="width:130px">&nbsp;</span> <span class="laniereD" style="width:100px">&nbsp;</span> <span class="laniereD" style="width: 70px">&nbsp;</span> <p>Tant qu'il est chaud, (etc.)</p> 

… et ça ne tombe pas en face. L'explication se trouve dans l'article sur le principe des flottants : un flottant file bien vers le bord gauche ou droit mais ne remonte pas. On devrait dire, en somme, qu'il dérive plutôt qu'il ne flotte.

           

Ce qui fait que, pour avoir des marges courbes bien placées l'une en face de l'autre, il faut écrire cette paire de marges ligne après ligne et non marge après marge. Il faut entrelacer les spans comme ceci :

 <span class="laniereG" style="width:130px">&nbsp;</span> <span class="laniereD" style="width:130px">&nbsp;</span> <span class="laniereG" style="width:100px">&nbsp;</span> <span class="laniereD" style="width:100px">&nbsp;</span> <span class="laniereG" style="width: 70px">&nbsp;</span> <span class="laniereD" style="width: 70px">&nbsp;</span> <p>Ce qui fait que, pour (etc.)</p> 

On voit l'intérêt d'avoir donné la même hauteur à toutes les lanières : ce n'est nullement obligatoire mais simplifie considérablement la vie.

---

Et, comme promis, il n'y aura pas de prochain article sur la question !

---

La solution Début

• Exemple de marges courbes
• Pile de flottants
• Découpage de l'image
• <img /> et background-image
• Solution
• Marge de droite