domingo, 31 de marzo de 2013

Mensaje con forma de burbuja


 Una Manera de colocar tu mensaje en una caja, esta tiene la forma de burbuja utilizando solo CSS esta función esta visible incluso en IE 8, aunque sin los bordes redondeados. La idea:

Comenzando desde nada Hasta ahora, con una meta, lograr transmitir lo dado.

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


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

Lo Fundamental 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;
}

¡Compártelo!


1 comentario :

Blogger Template by Daniel Galindo
})();