it-swarm.com.de

So erstellen Sie Chat-Bubbles wie Facebook Messenger

 enter image description here

Wie würde ich solche Sprechblasen erstellen? Genauer gesagt, wie zwei oder mehrere aufeinanderfolgende Nachrichten nach einem Benutzertyp in einer Blase als Ganzes gruppiert werden. Zum Beispiel FOR THE SENDER - Die erste Nachricht hat den rechten unteren Rand a 0, die Nachrichten dazwischen rechts oben, unten als 0 Randradius und die letzte Nachricht hat rechts oben 0 Grenzradius. Muss ich Javascript verwenden oder kann es mit css gemacht werden? 

HTML-Struktur kann sein

<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>

Welche Art von CSS-Klassen sollte ich verwenden?

6
Raj Sharma

Dies ist ein eher grundlegendes Beispiel, sollte jedoch alle erforderlichen Grundlagen erläutern.

Die Lösung liegt meistens innerhalb von +benachbarter Geschwisterauswahl . In diesem Fall wird ein unterschiedlicher Grenzradius auf mehrere Nachrichten derselben Person von einer Person angewendet.

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

Sie brauchen eine Anfangs- und eine Endklasse wie diese

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

Ich würde empfehlen, diesem Artikel zu folgen, wenn Sie Hilfe beim Erstellen von Textblasen erhalten möchten: https://www.templatemonster.com/blog/chat-bubbles-css-ui-tutorial/

Verwenden Sie für die Anfangs- und Endeblasen JQuery, um ihre CSS-Eigenschaften basierend auf ihrem übergeordneten Container zu ermitteln und zu ändern. Wenn Sie die gesendeten Bilder haben möchten, müssen Sie sie in das li einschließen und ein Float-Recht ausführen, oder absolute Position innerhalb eines relativen Objekts (der 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;
}

Verwenden Sie das folgende Skript, um den ersten und den letzten Schritt zu ändern:

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

hier ist das JSFiddle: https://jsfiddle.net/s60dgfw2/

Update basierend auf Ihrem Kommentar:

Ich glaube, dies ist das Beste, was Sie erreichen können, ohne JQuery zu verwenden. Sie benötigen erweiterte Selektoren, die Sie nur durch Gruppieren in .each () - Anweisungen über JQuery erhalten können. Oder indem Sie mehrere CSS-Klassen zu Listen hinzufügen.

In der response von LGSon's erfahren Sie, wie Sie dies mit mehreren CSS-Klassen machen.

Oder siehe unten:

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

Hier ist eine reine css-Lösung, aber es hängt von Ihrer Fähigkeit ab, die chat__bubble--stop-Klasse zu erkennen und anzuwenden, wenn die letzte Nachricht einer Gruppe gesendet wird. Leider kann die Pseudo-Klasse :last-of-type nicht verwendet werden. Wie andere darauf hingewiesen haben, ist die letzte Nachricht in einer Gruppe nicht unbedingt die letzte Konversation. Außerdem wird der benachbarte Geschwisterselektor (+) verwendet.

.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