Déco rond

Déco rond

Ambre2 me signale un article de Vadou, avec une décoration originale et qu'elle voudrait reproduire: regardons comment faire.
Je suppose que l'article, cité en référence, est réalisé avec un logiciel de traitement d'images mais on peut le faire simplement par code html, ce qui nécessite tout de même d'avoir un fond uni sur son blog ou d'insérer le montage dans un cadre défini.

Le petit
texte dans un
encart rond est écrit dans un paragraphe
carré, modifié en rond et placé au dessus de l'image.
Sa bordure est de la couleur du fond ce qui semble faire un arrondi dans l'image.
Il faut juste reprendre les sauts de ligne du texte pour qu'il ne déborde
pas du rond.

<div><img id="vd1" src="http://ekladata.com/MSyzf_4pB3aZRz0QcsJFlBQ1JBE.jpg" alt="" />
<p id="vd2">Le petit<br /> texte dans un<br /> encart rond est écrit dans un paragraphe<br />carré, modifié en rond et placé au dessus de l'image.<br />Sa bordure est de la couleur du fond ce qui semble faire un arrondi dans l'image.<br />Il faut juste reprendre les sauts de ligne du texte pour qu'il ne déborde<br /> pas du rond.</p>
</div>

<style></style>

Je vais essayer une décoration à peine différente pour en voir le résultat.

L'effet
est différent mais
moins spectaculaire.
Voyons dans un cadre à fond noir.

Cela semble
mieux ainsi et ça ressemble à ce que l'on peut faire sur the Gimp ou Photofiltre.
A vous de choisir et d'adapter !

Attention, mon code tient compte de sons centrage dans ma page.

<div style="width: 1170px; height: 650px; margin: 10px auto; background: #000000;"><img id="vd5" src="http://ekladata.com/MSyzf_4pB3aZRz0QcsJFlBQ1JBE.jpg" alt="" />
<p id="vd6"><br /><br />Cela semble<br /> mieux ainsi et ça ressemble à ce que l'on peut faire sur the Gimp ou Photofiltre.</p>
</div>

<style></style>