Faire une bulle de BD en CSS

sietjp · 12 Août 2005

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 · 12 Août 2005

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

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

Code:

<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 · 12 Août 2005

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 · 12 Août 2005

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

thibo · 12 Août 2005

sietjp a dit:
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.

:wink:

sietjp · 12 Août 2005

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. · 12 Août 2005

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 · 16 Août 2005

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.

cedric61 · 10 Avril 2018

Pour information je me suis posé la même question, toutes les réponses trouvées sur le net ne me satisfaisaint pas car il était hors de question d'utiliser une image pour le triangle de la bulle BD, et hors de question aussi d'insérer une balise de span vide dans le contenu.
Alors voici ma solution si ça peut aider :

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
    @import url('https://fonts.googleapis.com/css?family=Caveat+Brush');
.bullebd {
    background-color: #ffefa5;
    border-radius: 1em;
    padding: 2em;
    font-family: 'Caveat Brush', cursive;
}
.bullebd:after {
content: "▼";
font-size:1.4em;
    padding-top: 2em;
    float: right;
    color: #ffefa5;
}
    .bullebd2 {float:right; margin-top: 2em;}
  
</style>
</head>
<body>
  
<h1>Une bulle bdd en css3 sans image</h1>
<div class="bullebd">
    Mon petit bonhomme, les phrases historiques, aléa jacta est et tout ça, c’est moi qui les fais ici !
    </div>
  
  
    <div class="bullebd2">
    <img src="Cesar.png" width="150" height="176" alt="Jules César"/>
      
    </div>
      
</body>
</html>

Résultat visible ici

spout · 10 Avril 2018

@cedric61 et plein d'autres ici sans images: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Furtif · 11 Avril 2018

Sinon tu as aussi ce generateur en ligne :
http://www.ilikepixels.co.uk/drop/bubbler/

Avantage, le code css est assez leger...