[CSS] Marges courbes : fausse piste

Puisque vous avez appris par cœur l'article précédent vous savez comment construire une forme irrégulière à gauche du texte ou à droite : en empilant une série de "lanières" flottées à gauche ou à droite.

Question non résolue : comment faire apparaître une image dans cette forme, dans cette pile de lanières ? Pour l'occasion j'utiliserai une version miniature (120 pixels de large, 150 de haut) de ma poire de démonstration :

Afficher une image comme celle-ci est simple :

 <img width="120" height="150" src="http://gnagnagna/PoireMini.png" /> 

… où "gnagnagna" doit bien sûr être remplacé par le chemin d'accès à l'image. Vous avez déjà fait ce genre de chose, je pense ? Bon, revenons à nos poires et nos lanières et admettons qu'on veuille placer cette poire sur le côté gauche du texte.

Découper l'image

Une première idée est, justement, de découper l'image en bandes horizontales avec votre PhotoBoutique ou analogue préféré. Pour y voir clair je n'ai coupé ici que cinq bandes de 30 pixels de hauteur mais pour un effet agréable il serait plus judicieux de faire 30 bandes de 5 pixels de hauteur… Oui, c'est du boulot.

Ceci fait, on rogne le côté droit de chaque bande en s'arrêtant au premier pixel opaque. Oui, oui, c'est du boulot. On fabrique alors cinq images de 30 pixels de haut et de 30, 97, 115, 118 et 115 pixels de large, respectivement. Nommons-les laniere1.png à laniere5.png. Arrivé à ce point, le plus dur est fait. La suite ressemble beaucoup à ce que nous avons vu dans l'article précédent :

• définir une classe CSS :

   .laniere {float:left; clear:left; height:30px; margin:0; padding:0;border:none} 

  Les margin:0; padding:0;border:none ne sont là que par précaution : il y a peut-être un peu de décoration autour de vos images usuelles.
• mettre dans le code HTML, avant le texte "à marges courbes", cinq lignes ressemblant chacune à

   <img class="laniere" width="xx" src="http://gnagnagna/laniereN.png" /> 

  Le width de chaque lanière se précise individuellement, à la mimine et sans se tromper.
• Voilà.

Si l'on veut placer la poire à droite il faut refaire le rognage des bandes en partant du bord gauche de l'image – et redéfinir la classe CSS, évidemment.

Bilan

Cette méthode n'est pas mauvaise, elle marche et je m'en suis déjà servi… ce qui a montré trois gros défauts :

1. le travail de découpe n'est vraiment pas marrant, pour dire le moins ;
2. si la hauteur de bande ne convient pas, si l'image est plus agréable en plus clair ou plus foncé, si… il faut tout refaire : le code HTML bien sûr mais aussi toute la trituration d'image ;
3. enfin, à l'affichage, on a souvent des surprises : trente ou quarante images, même minuscules, n'arrivent pas instantanément ni simultanément dans le navigateur. Une image où manquent deux ou trois bandes horizontales, ça fait amateur.

Pour toutes ces raisons j'ai cherché à éviter le découpage physique de l'image. Rendez-vous aux prochains articles…

---

Le principe Révisons background-image Début

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

Comments

[Sagan33]

ce n'est pas la plus simple mais ce sont les bases
10000 ^^^^^^....

[AïmD !]

Ah, si tu le dis... :-)

[Sagan33]

en réfléchissant j'ai compris, je n'avais pas enregistré chaque bande de la poire.
Quel travail tout de même ! mais pour faire de bien jolies présentations.

Lien de mon article :
http://lemiroirauxessences.e-monsite.com/blog/vegetarisme-l-alimentation/en-concentre.html j'ai mis la poire avec le lien de tes articles si certains e-Monsitiens veulent utiliser ta méthode.
Perso j'ai fait plus simple, mais je vais m'en servir pour un autre article.

Merci encore pour ton travail, tes articles,

Bon dimanche à venir,

[Aïe mes doigts !]

En effet, c'était bien ça : il faut créer cinq images partielles.


Suite de la réponse précédente :


... mais cette méthode n'est pas la plus commode, c'est bien pourquoi cet article s'intitule "Fausse piste". La méthode moins lourde est exposée dans les articles suivants :-( Consolation : le
passage de l'une à l'autre ne demande pas trop de travail.

[Sagan33]

Bonjour Bren : quel travail, tu as du y passer tes nuits !

Alors pour ma part, toujours aussi douée, j'ai appliqué à la lettre (enfin il semble) mis d'abord l'image en haut de l'article avec les dimensions complètes puis toujours dans le html 5 lignes avec
les différentes dimensions mais il m'affiche 5 poires les unes au-dessous des autres,
au secours qu'ai-je mal fait Maître Bren .....................?

comment faire pour n'avoir qu'une seule poire^^^^

[Aïe mes doigts !]

Plusieurs heures, oui :-) surtout pour trouver la moins mauvaise manière de présenter les choses.


Ta question se résout dans le commentaire suivant, tant mieux, mais...

[Christina]

ouiiiii !!!
et pour le serpentin, justement c'est d'avoir intégré les encarts qui est très joli !
(malheureusement pour vous, les comms courts ne sont pas légion ici...)

[Bren du fat !]

Mais si : en voilà un ;-)

[Christina]

oui, c'est ce que je disais plus haut : "c'est mieux comme ça"
(un peu noyé dans toutes mes parenthèses...)

donc je précise, c'est même très très joli, avec la petite ligne de liaison en serpentin !

(euh, mais comme je suis tatillonne, pardon, je mettrais bien une petite marge d'un demi em de plus entre com et signature...)

[Bren du fat !]

Vous me flattez, là ! La petite ligne en serpentin existe depuis longtemps, mais là j'ai retouché ses couleurs pour donner un léger relief et y ai intégré la signature+date du comm


Petite marge : faut réfléchir. Pour certains comms très court la signature se place juste en dessous de l'avatar et moi ça me plaît bien. Peut-être qu'avec un poil de padding supplémentaire dans
la signature ? Vais voir ça (il y a +2px, ça vous convient ?)

[Christina]

ah, et maintenant je vois mon comm précédent affiché comme il faut (je ne comprends pas pourquoi il faut que ça recharge pour ça - là ça mettait aussi n° 1 au deuxième comm, avant que je
rafraîchisse la page) - c'est mieux comme ça !
(sauf que du coup on ne comprend plus ma réflexion de l'autre jour, arrghhh, j'ai l'air de quoi là... d'une chieuse qui critique un truc très bien ??)

[Bren du fat !]

Vous inquiétez pas, votre courriel m'a fait tout comprendre. Les comms sont moins criards comme ça, non ?

[Christina]

ah oui, j'ai oublié de vous dire l'autre fois : le code source ferait une jolie tapisserie !

[AïmD !]

N'est-ce pas ? héhé...

[Christina]

pouahh, en effet, quel boulot !
et puis arrive la chute, une fois qu'on a tout compris, grrr, c'est pas ça, la suite au prochain numéro, c'est cruel... suspens insoutenable...
mais hé hé, c'est là qu'on se rappelle que vous avez déjà vendu la mèche au premier numéro... ouf, je peux aller dormir !

[Aïe mes doigts !]

Vous me pensiez sadique ? Rooo...


J'ai pris la peine de décortiquer cette fausse piste parce qu'elle semble tellement évidente, naturelle, de bon sens : il y avait une image flottée, on en fait 5 (ou 30), ça semble aller de soi.
Et on se retrouve avec sur les bras un boulot aussi monstrueux que peu commode. Je suis un très chic type, dans le fond ;-DDD