JMiur [E]

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.

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

8 comentarios:

Domin-Omega  

¿Qué navegadores son los que ya leen la propiedad "border-radius" como tal... los que ya la estandarizaron?

Responder
JMiur  

En este momento, Opera, las versiones beta de FF (la 4) , de Internet Explorer (la 9) y creo que las versiones más recientes de Safari y Chrome.

Responder
Antonio Manfredi  

Donde va el css, antes o despues de que???

Gracias.

Responder
JMiur  

En Blogegr lo puedes poner con el resto, antes de </b:skin> o bien entre etiquetas <style> y </style>

Responder
EnManuel  

Hola amigo, cómo haría para colocar el triángulo en el borde izquierdo del globo?

JMiur  

Para alinearlo a la izquierda debes eliminar margin: auto de .speech-bubble:after {}

Para colocarlo en el borde izquierdo deben cambiarse todas las reglas. Fíjate en esta entrada.

Responder
Alvaro Lopez  

como puedo desplegar la burbuja justo donde doy click

JMiur  

Para eso se reuiqere JavaScript; no puede hacerse sólo con CSS.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR