CSS3 Speech Bubble

 

<div class="speech-bubble"> ... el texto a mostrar ... </div>

El truco que muestra Martin Ivanov es muy simple y nos ayuda a crear una caja de diálogo en forma de burbuja utilizando sólo CSS. La idea funcionará incluso en Internet Explorer 8 aunque, claro, en ese caso, sin los bordes redondeados.

Suspendisse hendrerit tempus tellus sed bibendum. Aenean sed diam ipsum, et hendrerit massa.

Suspendisse hendrerit tempus tellus sed bibendum. Aenean sed diam ipsum, et hendrerit massa.

Por ejemplo, creamos un DIV al que le ponemos la clase speech-bubble y cuyo contenido, será un texto cualquiera:

... el texto a mostrar ...

Y claro, lo fundamental es el CSS:

.speech-bubble {
background: #6495ED; /* el color de fondo */
color: #FFF; /* el color del texto */
font-family: Arial, Sans-serif;
font-size: 12px;
padding: 20px 10px 10px 10px;
text-align: center;
width: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
border: solid 10px transparent;
border-top-color: #6495ED; /* igual al color de fondo */
border-bottom: 0;
bottom: -20px; /* igual al borde + el padding-bottom de la definición anterior */
content: "";
display: block;
height: 0;
margin: auto;
overflow: hidden;
position: relative;
width: 0;
}

---

Esta es otra forma de crear burbujas utilizando sólo CSS; en Internet Explorer no se verán "redondeces" pero, dependiendo de los colores utilizados, se mostrará aceptablemente.

este es un texto

Un poco de HTML:

<div class="chat-bubble">
  este es el <span>texto</span>
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

Y mucho estilo para personalizar cualquier detalle:

.chat-bubble {
  background-color: #DEF;
  border: 2px solid #000;
  color: #444;
  display: inline-block;
  font-size: 36px;
  line-height: 1.3em;
  margin: 0 0 0 10px;
  padding: 10px;
  position: relative;
  text-align: center;
  width: auto;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 5px #FFF;
  -webkit-box-shadow: 0 0 5px #FFF;
  box-shadow: 0 0 5px #FFF;
}
.chat-bubble-arrow-border {
  border-color: #000 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  bottom: -22px;
  height: 0;
  left: 30px;
  position: absolute;
  width: 0;
}
.chat-bubble-arrow {
  border-color: #DEF transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  bottom: -19px;
  height: 0;
  left: 30px;
  position: absolute;
  width: 0;
}
.chat-bubble span {
    color: #000;
    font-family: Verdana;
    text-shadow: 1px 4px 1px #ABC;
}

este es otro texto distinto

Si se quiere centrar hay quw establecer el ancho así que cambiamos algunas propiedades acá:

.chat-bubble {
  .......
  display: block;
  margin: 0 auto;
  width: 300px;
}