CSS style for chat with more than one line messages

Asked

Viewed 1,035 times

3

Good morning, I have a doubt, in which I’ve been battling for some time, I’m new to working with html and css, I’m doing a chat (already finished), now I’m defining the styles to make it cuter, I need something of the genre,[! [insert image description here][1][1], for example I have so, if the message only has 1 line is good, my real problem and when I write 1 larger text

I have two Divs one where will contain the text and another to give the effect, this and the css that I currently have.

    .response{
  -webkit-box-shadow: 9px 17px 46px -10px rgba(0,0,0,0.26);
  -moz-box-shadow: 7px 17px 46px -10px rgba(0,0,0,0.26);
  box-shadow: 7px 17px 46px -10px rgba(0,0,0,0.26);
  background-color: #00aeef;
  border-width: 1px;
  border-color: #00aeef;
  border-style: solid;
  margin: 10px;
  width: 35%;
  position: relative;
  margin-left: 55.5px;
  margin-top: -45px;
  color: white;
  font-family: Muli-Regular;
  font-size: 14px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  min-width: 28%;
  max-height: 100%;
  max-width: 28%;
  word-wrap: break-word;
  }

.effect2{
  -webkit-box-shadow: 7px 17px 46px -10px rgba(0,0,0,0.26);
  -moz-box-shadow: 7px 17px 46px -10px rgba(0,0,0,0.26);
  box-shadow: 7px 17px 46px -10px rgba(0,0,0,0.26);
  background-color: #00aeef;
  width: 83px;
  margin-top: -40px;
  margin-left: 5px;
  border-bottom-left-radius: 20px;
  min-height: 30px;
  max-height: 30%;
 }
css

  • What’s the doubt? Post also the code because only with image is difficult to help.

  • Okay, but what’s your question? It wasn’t clear to me. Don’t forget to include the CSS in the question, if possible creating an example that works so we can understand the problem. If in doubt, please read this: https://answall.com/help/mcve

2 answers

4


I made a model that I think can suit you more practically. I separated the top part into a div and the bottom part where the text comes in another div. The div where you have the text has the automatic height according to the text that comes in.

To make the circle where the image of .avatar I used a pseudo element ::after and box-shadow with two leftovers and the box .txt blue border-radius

See in the example as it turned out, of a studied in the code to better understand and any doubt just leave a comment that I explain to you.

.container {
  position: relative;
  overflow: hidden;
  padding: 0.5em;
}
.avatar {
  width: 150px;
  height: 30px;
  background: rgb(13, 114, 245);
  border-radius: 30px 30px 0% 0%;
  margin-left: 50px;
  position: relative;
}
.avatar::after {
  content: "";
  position: absolute;
  left: -53px;
  top: 0;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 4px solid #fff;
  background-image: url(http://placecage.com/50/50);
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.75), 0 0 0 3px rgba(255,255,255,1.0);
  border-radius: 50%;
}
.txt{
  position: relative;
  color: #fff;
  width: 200px;
  height: auto;
  background: rgb(13, 114, 245);
  border-radius: 0% 0% 30px 30px;
  box-sizing: border-box;
  padding: 0 10px 30px 60px;
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.25);
}
<div class="container">
  <div class="avatar"></div>
  <div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
<div class="container">
  <div class="avatar"></div>
  <div class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam iste ratione impedit facere quibusdam odit, iusto consequuntur error alias praesentium.</div>
</div>

  • thanks, I got it :)

  • @Ricardo glad it worked out! If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted.

  • yes, the only thing I’m here with the little problem and the white part, but I’m trying to solve

  • @Ricardo who doubts tells me that help ok

  • I think I’ve got it, it’s not as good as the blue part but it’s okay, I’m having a problem changing the image, since the images I have are very big and only appear 1 little bit, if I move the image to 50x50, it will work right?

  • Ricardo vc can put the image with 50px, or else put the property in CSS background-size:cover in class .avatar::after

  • 1

    thank you very much for your help, I am very grateful

Show 2 more comments

2

Since I don’t know exactly how the rest of your code is, I can’t give a 100% functional example, but I can explain the idea to you and give you a direction of what to do.

I will assume that in addition to these two Divs there is one more that has the user icon sending the message.

what you could do is put these 3 Divs inside a single container. Something similar to this:

<div class="container" >
    <div class="icone"  >    </div>

    <div class="response" >   </div>
    <div class="effect2" >    </div>
</div>

And then force the icon to stay at the bottom of that container, so that the effect happens:

.icone {
    position: absolute;
    left: 0px;
    bottom: 10 px; /* vá alterando o valor daqui até ficar numa boa posição para o efeito*/
}

the value Absolute of the attribute position causes the element to be positioned relative to the first parent element that is not Static, for better understanding see here or here.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.