web-dev-qa-db-fra.com

Comment créer des bulles de discussion comme Facebook Messenger

 enter image description here

Comment pourrais-je créer des bulles de discussion comme celle-ci? Plus précisément, comment regrouper deux ou plusieurs messages consécutifs d’un type d’utilisateur dans une bulle. Par exemple, POUR L’EXPÉDITEUR - le premier message a un bord inférieur droit de 0, les messages situés entre les côtés supérieurs droit et inférieur représentent un rayon de bordure égal à 0 et le dernier un rayon de bordure supérieur droit égal à 0. Dois-je utiliser javascript ou est-ce possible avec css? 

Structure HTML peut être

<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

Quel genre de classe/styles css devrais-je utiliser?

csshtml5css3chat
6
Raj Sharma

Ceci est un exemple assez basique mais il devrait expliquer tous les principes fondamentaux dont vous avez besoin.

La majeure partie de la solution réside dans +sélecteur frère/sœur adjacent . Dans ce cas, il est utilisé pour appliquer un rayon de bordure différent à plusieurs messages consécutifs de la même personne.

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 30px;
}
<ul>
 <li class="him">By Other User</li>
 <li class="me">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me">By this User, fourth message</li>
</ul>

17
Serg Chernata

Vous aurez besoin d'un cours de début et de fin, comme celui-ci

li {
  border: 1px solid black;
  list-style-type: none;
  margin: 2px 0;
  padding: 2px 5px;
}
.him {
  float: left;
  border-radius: 0 10px 10px 0;
  clear: both;
}
.me {
  float: right;
  border-radius: 10px 0 0 10px;
  clear: both;
}
.him.start {
  border-top-left-radius: 10px;  
}
.him.end {
  border-bottom-left-radius: 10px;  
}
.me.start {
  border-top-right-radius: 10px;  
}
.me.end {
  border-bottom-right-radius: 10px;  
}
<ul>
 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>
    
 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>
    
 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

</ul>

2
LGSon

Je suggère de suivre cet article pour vous aider à créer des bulles de texte: https://www.templatemonster.com/blog/chat-bubbles-css-ui-tutorial/ } _

En ce qui concerne les bulles de début et de fin, utilisez JQuery pour identifier et modifier leurs propriétés CSS en fonction de leur conteneur parent . Si vous voulez les images envoyées, vous devez les envelopper dans le li et faire un float à droite, ou position absolue à l'intérieur d'un objet relatif (le li).

<ul class="ulContainer">
  <li>test1</li>
  <li>test1</li>
  <li>test1</li>
</ul>

Css:

.ulContainer li{
  width:200px;
  height:20px;
  background-color:#9abff9;
  list-style-type:none;
  margin:10px 0 10px 0;
  padding: 3px 3px 3px 5px;
  border-radius: 10px 2px 2px 10px;
}

Utilisez le script ci-dessous pour changer le premier et le dernier li:

$('.ulContainer li:first').css('border-top-right-radius','10px');
$('.ulContainer li:last').css('border-bottom-right-radius','10px');

voici le JSFiddle: https://jsfiddle.net/s60dgfw2/

Mise à jour en fonction de votre commentaire:

Je pense que c’est le meilleur moyen d’atteindre ce que vous essayez d’atteindre sans utiliser JQuery. Vous avez besoin de sélecteurs avancés que vous ne pouvez obtenir qu'en regroupant des instructions .each () via JQuery. Ou en ajoutant plusieurs classes css aux listes.

Veuillez consulter la réponse de LGSon pour savoir comment procéder avec plusieurs classes CSS.

Ou voir ci-dessous:

https://jsfiddle.net/5dcto0td/

.fancyContainer{
  border: 1px solid #555;
  position:relative;
  width:300px;
  padding:5px;
  overflow:hidden;
}
.chatBox {
  width: 300px;
  list-style: none;
  margin: 0 0 0 -40px;
  position:0;
}

.chatBox li {
  margin: 5px 0 5px 0;
  padding: 3px 5px 3px 5px;
}

/*Set up initial chat element for .me*/
.chatBox .me {
  min-height: 20px;
  float:right;
  clear: both;
  background-color: #34a1ef;
  border-radius: 10px 2px 2px 10px;
}

/*Set up initial chat element for .him*/
.chatBox .him {
  min-height: 20px;
  float:left;
  clear: both;
  background-color: #ddd;
  border-radius: 2px 10px 10px 2px;
}
/*Set up grouped radius*/
.him + .me {
  border-top-right-radius:10px;
}
.me + .him {
  border-top-left-radius:10px;
}
.me + .me {
  border-bottom-right-radius:2px;
}
.him + .him {
  border-bottom-left-radius:2px;
}


/*Set up First and Last radius for .me*/
.chatBox > .me:first-child {
  border-top-right-radius:10px;
}
.chatBox > .me:last-child{
  border-bottom-right-radius:10px;
}

/*Set up First and Last radius for .him*/
.chatBox > .him:first-child{
  border-top-left-radius:10px;
}
.chatBox > .him:last-child{
  border-bottom-left-radius:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fancyContainer">
  <ul class="chatBox">
    <li class="him">Hello... This is a chatbox.</li>      
    <li class="me">Well well. I guess this is a chatbox.</li>
    <li class="me">I'll have to talk about this some other time.</li>
    <li class="me">No wait. I might change my mind</li>
    <li class="him">Nonesense good sir! We'll have this talk right now and here.</li>
    <li class="him">I Like...</li>
    <li class="him">popsicles.</li>
    <li class="me">I can't believe you've done this to me!</li>
  </ul>
</div>

1
MrAmazing

Voici une solution purement CSS, mais elle dépend de votre capacité à détecter et à appliquer la classe chat__bubble--stop lorsque le message final d'un groupe est envoyé. Malheureusement, la pseudo-classe :last-of-type ne peut pas être utilisée; comme d'autres l'ont souligné, le dernier message d'un groupe n'est pas nécessairement le dernier de la conversation. Il utilise également le sélecteur de fratrie adjacent (+).

.chat {
  list-style-type: none;
  width: 20em;
}

.chat__bubble {
  margin-bottom: 3px;
  padding: 5px 10px;
  clear: both;
  border-radius: 10px 10px 2px 2px ;
}

.chat__bubble--rcvd {
  background: #f2f2f2;
  color: black;
  float: left;
  border-bottom-right-radius: 10px;
}

.chat__bubble--sent {
  background: #0066ff;
  color: white;
  float: right;
  border-bottom-left-radius: 10px;
}

.chat__bubble--sent + .chat__bubble--sent {
  border-top-right-radius: 2px;
}

.chat__bubble--rcvd + .chat__bubble--rcvd {
  border-top-left-radius: 2px;
}

.chat__bubble--stop {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
<ul class="chat">
 <li class="chat__bubble chat__bubble--rcvd chat__bubble--stop">What are you up to?</li>
 <li class="chat__bubble chat__bubble--sent">Not much.</li>
 <li class="chat__bubble chat__bubble--sent">Just writing some CSS.</li>
 <li class="chat__bubble chat__bubble--sent">I just LOVE writing CSS.</li>
 <li class="chat__bubble chat__bubble--sent chat__bubble--stop">Do you?</li>
 <li class="chat__bubble chat__bubble--rcvd">Yeah!</li>
 <li class="chat__bubble chat__bubble--rcvd">It's super fun.</li>
 <li class="chat__bubble chat__bubble--rcvd chat__bubble--stop">... SUPER fun.</li>
</ul>

1
metalex9