3

Boa dia, tenho uma duvida, na qual ja estou a batalhar a algum tempo, sou novo a trabalhar com html e css, estou a fazer um chat (ja se encontra terminado), agora estou a definir os estilos para deixar mais bonitinho, preciso algo do genero,[![inserir a descrição da imagem aqui][1]][1], por exemplo eu tenho assim, caso a mensagem so tenha 1 linha fica bom, o meu real problema e quando escrevo 1 texto maior

tenho duas divs uma onde ira conter o texto e outra para dar o efeito, este e o css que tenho atualmente.

    .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%;
 }
2
  • Qual a dúvida? Poste também o código pois apenas com imagem fica difícil de lhe auxiliar.
    – Laerte
    7/05/2018 às 11:43
  • Certo mas, qual a sua dúvida? Para mim não ficou claro. Não esqueça de incluir o CSS na pergunta, se possível criando um exemplo que funcione para podermos entender o problema. Se estiver com dúvidas, por favor leia isso: pt.stackoverflow.com/help/mcve 7/05/2018 às 11:44

2 Respostas 2

4

Fiz um modelo que acho que pode te atender de forma mais prática. Separei a parte de cima em uma div e a parte de baixo onde vem o texto em outra div. A div onde tem o texto tem a altura automática de acordo com o texto que vier dentro.

Para fazer o circulo ondem vem a imagem do .avatar eu usei um pseudo elemento ::after e box-shadow com duas sobras e o box .txt azul border-radius

Veja no exemplo como ficou, de uma estudada no código para entender melhor e qualquer dúvida é só deixar um comentário que te explico.

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

7
  • obrigado, consegui :)
    – Ricardo
    7/05/2018 às 16:13
  • @Ricardo que bom que deu certo! Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita.
    – hugocsl
    7/05/2018 às 16:18
  • sim, a unica coisa que agora estou aqui com o problemazito e com a parte branca, mas estou a tentar resolver
    – Ricardo
    7/05/2018 às 16:22
  • @Ricardo qq duvida me fala que de ajudo ok
    – hugocsl
    7/05/2018 às 16:54
  • 1
    muito obrigado pela sua ajuda, fico muito grato
    – Ricardo
    7/05/2018 às 17:38
2

Como eu não sei exatamente como está o resto do seu código, não posso dar um exemplo 100% funcional, mas posso te explicar a ideia e te dar um rumo do que fazer.


Vou assumir que além destas duas divs há mais uma que possui o icone do usuário enviando a mensagem.

o que você poderia fazer é colocar estas 3 divs dentro de um único container. Algo semelhante a isso:

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

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

E então forçar o ícone a ficar na parte de baixo desse container, para que assim o efeito aconteça:

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

o valor absolute do atributo position faz com que o elemento seja posicionado relativamente com o primeiro elemento parente que não seja static, para melhor entendimento veja aqui ou aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .