Balão de mensagem html css

Balão de mensagem html css

Este tutorial mostra como criar balões de mensagem com HTML e Css.

Nesta seção, projetaremos uma estrutura simples na tag <div class=”box-balao”>. 

temos dentro da tag <div> a tag <p> e <span>. Essas tags usaremos para criar o nosso balão.

Vamos Adicionar o HTML

        <div class="balao">
            <p>
              Olá este balão de mensagem foi feito com Html e Css, baixe o código use no seu projeto para agilizar o seu tempo.
              <span class="nome">Loop Nerd</span>
            </p>
        </div>
          
        <div class="balao">
            <p>
              Obrigado por disponibilizar o material para estudos.
              <span class='nome'>Márcio</span>
            </p>
        </div>

        <div class="balao">
            <p>
              Obrigado por compartilhar o conhecimento.
              Vou ver mais no Blog!
              <span class="nome">Célio</span>
            </p>
        </div>

        <div class="balao">
            <p>
              Veja mais artigos de html e css no blog, 
              <span class="nome">Loop Nerd</span>
            </p>
        </div>

        <div class="balao">
            <p>
              Obrigado por disponibilizar o conteúdo.
              <span class="nome">Flávia</span>
            </p>
        </div>


    </div><!--Box Balao-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso balão.

.box-balao {

    max-width: 350px;
    margin: 0 auto;

}

.box-balao .balao {
  
    background-color: #ffffff;
    box-shadow: 3px 0px 5px 0px #d0d0d0;
    color: #9fa2a7;
    font-size: 0.8em;
    line-height: 1.75;
    padding: 15px 25px;
    margin-bottom: 75px;
    cursor: default;
    border-radius: 10px;

}

.box-balao .balao:nth-child(2n) { border-left:5px solid; }
.box-balao .balao:nth-child(2n):after {
  
    content: "";
    margin-top: -25px;
    padding-top: 0px;
    position: relative;
    bottom: -35px;
    left: 0%;
    border-width: 25px 0 0 25px;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;

}

.box-balao .balao:nth-child(2n+1) { border-right:5px solid; }
.box-balao .balao:nth-child(2n+1):after {

    content: "";
    margin-top: -25px;
    padding-top: 0px;
    position: relative;
    bottom: -35px;
    left: 85%;
    border-width: 25px 25px 0 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;

}

.box-balao .balao:nth-child(4n+1) { border-color: #0ddadd; }
.box-balao .balao:nth-child(4n+2) { border-color: #9B9898; }
.box-balao .balao:nth-child(4n+3) { border-color: #f4de66; }
.box-balao .balao:nth-child(4n+4) { border-color: #ffb4b4; }

.box-balao .balao p:before {

    content: "“";
    font-family: Georgia;
    font-size: 40px;
    line-height: 0;
    display: inline-block;
    display: -webkit-inline-box;
    top: 12px;
    position: relative;

}

.box-balao .balao p { 

    font-family: 'open_sansregular';
    font-size: 1em;
    overflow:hidden;  

}

.box-balao .balao .nome {

  display: inline;
  font-style: italic;
  float: right;

}

.box-balao .balao .nome:before { content: "- "; }

Combinando as Duas seções acima Html e Css temos o seguinte Resultado !

Veja o Resultado baixo!

Baixar Código Veja Funcionando