Faire une bulle de BD en CSS

[sietjp]

Bonjour,
J'aimerais faire un encadrement de texte en forme de bulle de bédé, c'est à dire avec 3 coins arrondis et un quatrième arrondi aussi mais avec un petit triangle qui s'échape comme dans une bulle de bédé quoi. Il faut que la taille pluisse varier car le texte n'est pas fixe. Si quelqu'un peut m'aider où me donner une piste merci!

[oli004]

Je pense que tu trouveras ton bonheur ici : http://www.alsacreations.com/articles/cadre/

et plus particulièrement en t'inspirant de cela :

Code: Tout sélectionner

<div id="cadre">
   <div id="hautdroit"></div><div id="hautgauche"></div>
   <div id="contenu">
      <p>Texte de contenu</p>
      <p>Texte de contenu</p>
      <p>Texte de contenu</p>
   </div>
   <div id="basdroit"></div><div id="basgauche"></div>
</div>

CSS :
body {
font: 1em black verdana, sans-serif;
background-color: white;
}
#cadre { /* taille du cadre, à titre d'exemple */
width: 15em;
background-color: #909090;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(hautgauche.gif);
}
#hautdroit {
float: right;
background: url(hautdroit.gif);
}
#basgauche {
background: url(basgauche.gif);
}
#basdroit {
float: right;
background: url(basdroit.gif);
}
#contenu p {
color: white;
margin: 0.5em; /*gestion des espaces interparagraphes */
}


[sietjp]

Merci bien, trés intéressant. Par contre je vais devoir adapter ce code car je voudrais un bulle vide (edit: vide au centre, avec du texte à l'intérieur quand même). Ca veut dire qu'il faut en plus des quatres "images coins" , 4 "images côtés" représentant des traits verticaux et horizontaux. Quelqu'un voit comment faire ça

[Mumuri]

excuse moi, mais c'est bien ce qui est fait la haut
-http://www.alsacreations.com/articles/cadre/cadre1/cadre.htm

[thibo]

Merci bien, trés intéressant. Par contre je vais devoir adapter ce code car je voudrais un bulle vide (edit: vide au centre, avec du texte à l'intérieur quand même). Ca veut dire qu'il faut en plus des quatres "images coins" , 4 "images côtés" représentant des traits verticaux et horizontaux. Quelqu'un voit comment faire ça

Si c'est jsute pour faire une bulle blanche avec un contour noir et fin, il va falloir que tu te mettes à un logiciel d'image pour te bidouilier ça. Gimp ou Photoshop.

[sietjp]

Oui c'est bien une bulle blanche avec un contour noir que je veux faire, mais le gros problème c'est de pouvoir avoir une taille de texte variable, qui peut aller d'un mot à 30 lignes.
Pour mumuri, en fait par rapport à l'article c'est le fait qu'il y ait un contour diférent du fond qui ne me permet pas d'utiliser le même code.

[Patrice A.]

Avec le cadre de largeur fixe proposé sur alsacréations, tu n'auras pas de problème sauf si ton texte est vraiment très très long.
Sinon, tu mets tout simplement l'image haut en haut, le texte dans un div avec un fond image en répétition verticale, et en dessous l'image du bas avec juste le triangle.

[SIBELIUS]

Pour éviter les confusions :
- les styles CSS gèrent le design... pas le graphisme !

Le graphisme, c'est à dire le dessin avec photoshop par exemple nécessite... un logiciel de graphisme.

Le design, c'est à dire l'agencement général, le choix des teintes et leur harmonie, le positionnement, le taille, la couleurs, etc. des éléments est géré par les CSS.