viernes, 1 de julio de 2011

Vagabundia

Vagabundia


Más burbujas con CSS

Posted: 30 Jun 2011 08:00 PM PDT

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

No hay comentarios:

Publicar un comentario

Correo Vaishnava