Como hacer un globo de historieta solo con CSS

Las posibilidades con CSS son casi infinitas, y mucho depende de la creatividad del programador o diseñador, no obstante las grandes limitaciones, por lo general vienen de mano de los navegadores y su bendita compatibilidad con los estándares. No obstante hay personas que todavía logran aprovechar las herramientas que están disponibles hoy en día para encontrar nuevas formas de implementar CSS, hoy mientas leía a Jon Rohan encontré una forma realmente ingeniosas de crear globos o bocadillos sin usar absolutamente ninguna imagen.

Antes de empezar una captura de pantalla de como quedaría el globo o bocadillo (términos que aprendí gracias a Tamara hace 10 minutos porque no sabia el nombre real de este componente tan usado en los comics :P )

globo solo con css

Y todo esto sin usar una sola imagen. Empecemos a ver como armar esto paso por paso.

1) Lo primero es el código HTML del globo estilo historieta.

PLAIN TEXT
HTML:
  1. <div class="chat-bubble">
  2. Globo o bocadillo
  3.   <div class="chat-bubble-arrow-border"></div>
  4.   <div class="chat-bubble-arrow"></div>
  5. </div>

2) Una vez que colocamos el código HTML pasemos a colocar el CSS componente a componente, lo primero que vamos a hacer es crear el estilo del div que es el globo propiamente, el mismo se hace usando como base la propiedades CSS para crear bordes redondeados, que ya vimos en otro tutorial. Por lo que el código seria el siguiente:

PLAIN TEXT
CSS:
  1. .chat-bubble {
  2. background-color:#EDEDED;
  3. border:2px solid #666666;
  4. font-size:35px;
  5. line-height:1.3em;
  6. margin:10px auto;
  7. padding:10px;
  8. position:relative;
  9. text-align:center;
  10. width:300px;
  11. -moz-border-radius:10px;
  12. -webkit-border-radius:10px;
  13. -moz-box-shadow:0 0 5px #888888;
  14. -webkit-box-shadow:0 0 5px #888888;
  15. }

Como se ve en el código no hay nada raro, es exactamente lo mismo que vimos en el tutorial que les comente anteriormente, además que se le agrega una sombra, algo que le da un efecto visual muy lindo. Si hicimos todo bien el resultado parcial seria el siguiente:

globo css parcial

3) Ahora solo falta agregar el triangulo inferior para darle ese aspecto de globo de historieta tan clásico, para hacer eso el código se divide en dos partes. La primer parte del código se encarga de generar el fondo del triangulo que luego se convertirá en el borde visualmente.

PLAIN TEXT
CSS:
  1. .chat-bubble-arrow-border {
  2.   border-color: #666666 transparent transparent transparent;
  3.   border-style: solid;
  4.   border-width: 10px;
  5.   height:0;
  6.   width:0;
  7.   position:absolute;
  8.   bottom:-22px;
  9.   left:30px;
  10. }

Y la segunda parte que incluye un hack para IE6 que se encarga de rellenar el triangulo.

PLAIN TEXT
CSS:
  1. .chat-bubble-arrow {
  2.   border-color: #EDEDED transparent transparent transparent;
  3.   border-style: solid;
  4.   border-width: 10px;
  5.   height:0;
  6.   width:0;
  7.   position:absolute;
  8.   bottom:-19px;
  9.   left:30px;
  10. }
  11.  
  12. /* IE6 */
  13. .chat-bubble-arrow {
  14.     _border-left-color: pink;
  15.     _border-bottom-color: pink;
  16.     _border-right-color: pink;
  17.     _filter: chroma(color=pink);
  18. }

Y eso es todo, si siguieron todos los pasos tendrán un globo diseñado íntegramente en CSS y sin usar absolutamente ninguna imagen.

La compatibilidad con navegadores es muy pero muy buena, sacando obviamente a Internet Explorer que si bien se ve correctamente los bordes redondeados no funcionan y veremos el globo con bordes rectangulares, algo que no es grave y que en primera instancia, y al menos a mi, no me impediría usar esta técnica :D

Tags:

Escrito por Pablo

Programador con más de 10 años de experiencia, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

El Miércoles, Octubre 21st, 2009 a las 11:59 y fue guardada bajo Programación, Tutoriales.

Compartir esta entrada

Entradas relacionadas

6 Comentarios en “Como hacer un globo de historieta solo con CSS”

  1. Tweets that mention Como hacer un globo de historieta solo con CSS | Kabytes -- Topsy.com Dice:
    Octubre 22nd, 2009 a las 2:20

    [...] This post was mentioned on Twitter by Proyecto Autodidacta and Argentina Feeds, Ricardo Donoso. Ricardo Donoso said: Como hacer un globo de historieta solo con CSS http://bit.ly/2d96GO [...]

  2. dannyfilth Dice:
    Octubre 22nd, 2009 a las 8:25

    No funciona ni en IE6 ni en IE8, no lo he probado en el 7 y no solo lo de los bordes, sino que el triangulo inferior queda montado sobre las letras GL de globo.

  3. Pablo Dice:
    Octubre 22nd, 2009 a las 10:13

    @dannyfilth: Rarisimo, yo lo probe en el 6 en el 8 no, pero funciono, no podra ser que te falto copiar alguna propiedad?

    Avisame!

    Saludos!

  4. uberVU - social comments Dice:
    Octubre 24th, 2009 a las 1:34

    Social comments and analytics for this post…

    This post was mentioned on Twitter by ARfeeds: [Kabytes] Como hacer un globo de historieta solo con CSS http://bit.ly/2d96GO...

  5. j0n4th4ntub3 Dice:
    Noviembre 24th, 2009 a las 11:27

    buenisimo enserio grax por esto!

  6. anonimo Dice:
    Noviembre 24th, 2009 a las 11:38

    una preg: como puedo hacer para que el arrow (la flecha) cambie de direccion? osea no para abajo para la izquierda grax de antemano

Deja tu comentario

Seguir comentarios por RSS