Cajas de texto CSS3 con forma de burbuja

El truco que voy a mostraros son una serie de cajas de texto, con forma de burbuja o estilo bocadillo, realizadas con CSS3, y en ellas podrás escribir el texto o párrafos que desees, en forma de burbuja de dialogo, cómo en las tiras de comics. Es una manera muy original de colocar texto o hasta incluso códigos y enlaces, que dejará perplejos a muchos de tus lectores de tu blog. A continuación podrás ver una serie de ejemplos de cajas con forma de burbuja, y su respectivo código de cada ejemplo.
óññ

Burbuja correspondiente al ejemplo 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae odio nec lorem sagittis luctus. Aliquam nisi eros, feugiat sed facilisis ut, rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero. In hac habitasse platea dictumst. Rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero.

Burbuja correspondiente al ejemplo 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae odio nec lorem sagittis luctus. Aliquam nisi eros, feugiat sed facilisis ut, rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero. In hac habitasse platea dictumst. Rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero.

Burbuja correspondiente al ejemplo 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae odio nec lorem sagittis luctus. Aliquam nisi eros, feugiat sed facilisis ut, rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero. In hac habitasse platea dictumst. Rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero.

Burbuja correspondiente al ejemplo 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae odio nec lorem sagittis luctus. Aliquam nisi eros, feugiat sed facilisis ut, rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero. In hac habitasse platea dictumst. Rhoncus eget sapien. Cras sit amet tristique erat. Mauris et tincidunt libero.
CSS de la caja de texto con forma de burbuja

.burbuja-dialogo {
 position: relative;
 margin: 0 auto; /* Centrar con CSS */
 background-color: #292929; /*Color del fondo */
 width: 500px; /* Ancho */
 height: 200px; /* Alto */
 line-height: 40px; /* altura del texto */
 padding: 30px 20px 20px 20px; /* Relleno */
 color: white;  /* color del texto */
 text-align: center;  /* Alineación del texto */
 border-radius: 10px; /* Borde redondeado */
 font-family: Georgia, sans-serif; /* Fuente del texto */
 font-size: 16px; /* Tamaño de la fuente */
}
.burbuja-dialogo :after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid; /* Borde y tamaño */
}
/* Posición del triangulo */
.burbuja-dialogo-arriba:after {
  border-bottom-color: #292929;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.burbuja-dialogo-derecha:after {
  border-left-color: #292929;
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
.burbuja-dialogo-abajo:after {
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
.burbuja-dialogo-izquierda:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

HTML del ejemplo 1

<div class="burbuja-dialogo burbuja-dialogo-arriba">
Texto o párrafo aquí</div>

HTML del ejemplo 2

<div class="burbuja-dialogo burbuja-dialogo-derecha">
Texto o párrafo aquí</div>

HTML del ejemplo 3

<div class="burbuja-dialogo burbuja-dialogo-abajo">
Texto o párrafo aquí</div>

HTML del ejemplo 4

<div class="burbuja-dialogo burbuja-dialogo-izquierda">Texto o párrafo aquí</div>

Get free premium widgets for your blog and website.