JMiur [E]

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;
}
REFERENCIAS:jonrohan.me

2 comentarios:

Graciela  

Un encanto!

Responder
Hector020  

Exelente!

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