Speech bubbles con CSS solamente
Escrito el 09 Mar, 2010 por Alexis en CSS
Nicolas Gallagher ha creado una serie de Speech bubbles solamente con CSS2.1 y condimentados con CSS3, logrando así algo que solo se podria obtener mediante javascript. Usando un HTML semántico y cero imágenes se pueden lograr resultados como el siguiente:
El HTML del que les hablaba es muy simple, solamente podemos escribir <div>Content</div> o <p>Content</p> y la magia de CSS se hará cargo de ahí en mas.
La mención honorifica se la llevan los pseudo-elements :before y/o :after que crearan nuestras formas (Speech bubbles) y las propiedades border-radius y transform son los condimentos.
Si nos ponemos a trabajar con los pseudo-elements y las propiedades arriba mencionadas podemos lograr resultado muy interesantes.
Un ejemplo de esto, puede ser este CSS donde se creara un Speech Bubble con un triangulo isoceles en la parte inferior
/* Bubble con triangulo isósceles ------------------------------------------ */ .triangle-isosceles { position:relative; padding:15px; margin:1em 0 3em; color:#000; background:#f3961c; /* css3 */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background:-moz-linear-gradient(top, #f9d835, #f3961c); background:linear-gradient(top, #f9d835, #f3961c); } /* crear triangulo */ .triangle-isosceles:after { content:"\00a0"; display:block; /* reduce the damage in FF3.0 */ position:absolute; z-index:-1; bottom:-30px; left:50px; width:0; height:0; border-width:15px 15px; border-style:solid; border-color:#f3961c transparent transparent; }
Dentro del demo podras observar el comportamiento y acceder a todo el CSS necesario para que puedas ver en detalle como funciona cada shape y así poder implementarlas o crear shapes propias.
8 comentarios to “Speech bubbles con CSS solamente”
Trackbacks/Pingbacks
Back to TopDejar un comentario
Additional comments powered by BackType

















baires |10/3/2010| Site: twitter.com/baires
Speech bubbles con #CSS solamente http://goo.gl/fb/GLIr #css3
This comment was originally posted on Twitter
css3watcher |10/3/2010| Site: twitter.com/css3watcher
RT @baires: Speech bubbles con #CSS solamente http://goo.gl/fb/GLIr #css3
This comment was originally posted on Twitter
Squibbleworld |10/3/2010| Site: twitter.com/Squibbleworld
RT @baires: Speech bubbles con #CSS solamente http://goo.gl/fb/GLIr #css3
This comment was originally posted on Twitter
Fernando de Sá |10/3/2010| Site: starosastudio.com
Me pareció muy bueno el articulo y la forma de llegar al resultado, solo debo aclarar ya que no queda explicito que esto; aún no funciona en todos los navegadores (entiéndase todos como: FF, IE 7 y 8, Safari, Chrome y Opera). La opción es válida tal cual está planteada para FF solamente, ya que en los demás no se obtienen todos los elementos.
Saludos, y muy bueno el blog!!!
Alexis |10/3/2010| Site: eliseos.net
CSS3 e IE son como el agua y el aceite. Pero esto se visualiza correctamente en FF3, Chorme4/5, Safari 4 yo Opera 10.5. Solamente los gradients se extrañan en algunos navegadores.
cristianarenal |10/3/2010| Site: twitter.com/cristianarenal
Speech bubbles solamente con CSS solamente http://bit.ly/cD31oT GENIAL!
This comment was originally posted on Twitter
Fliberty |28/4/2010| Site: pachakamaq.com
Probado en Firefox y Safari, todo se ve bien, en IE no se notan el efecto redondeado.
Alexis |28/4/2010| Site: eliseos.net
IE desconoce por completo a CSS3, esta tecnica utiliza la propiedad transform y varios pseudo elementos, y hasta que no salga IE9 no podremos utilizar la tecnica en dicho navegador (y nunca por completo)