Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


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.


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.


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.


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.


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>


Aizum Blog, sábado, noviembre 16, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9