Cómo construir una interfaz de chat con CSS

El otro día vi un tutorial sobre cómo hacer un chat muy básico con PHP y MySQL y la verdad es que a pesar de que es sencillo hacer uno muchas veces no me dejarán mentir que la interfaz es lo menos en lo que se fijan estos tutoriales, ya que son más back-end.

En el tutorial de hoy vamos a construir una interfaz de chat sólo con CSS, sin nada extraño para que se vea bien y si ustedes están aprendiendo a usar llamadas al servidor y bases de datos pues ya tienen la idea para que si van a crear un chat usen estos consejos que les doy. El chat está chulo la verdad y no es porque lo diga yo, sino porque se puede construir con lo más básico de CSS.

Demo del tutorial

Estructura

Les coloco una imagen de cómo está constituido el chat a nivel de HTML, muy básicos diría yo pero que son suficientes para crear toda la interfaz sin mucho esfuerzo. Lo más complicado diría yo que son las propias interfaces de diálogos pero veremos que una vez que tenemos el CSS nada más es cuestión de mover el orden de los elementos para que todo funcione automáticamente.

La clase de mensaje-autor es para el llama a un amigo, y la clase de mensaje-amigo es para el invitado o la persona con la que queremos platicar. Si se fijan en el HTML verán que son los mismos elementos, sólo que para mover todo a la izquierda movemos el HTML de la foto y de la flechita.

CSS

Por lo primero que empezamos el por configurar el chat en general y su header para que siempre esté visible aunque hagamos scroll por los mensajes. Nada del otro mundo.

A continuación configuramos la cajita de mensajes y el botón para que podamos insertar un nuevo mensaje. Como les repito, en este tutorial no nos toca ver el funcionamiento, pero en próximos veremos cómo andarlo a funcionar.

A continuación viene lo rudo. Tenemos la configuración de los mensajes del autor, donde nos toca acomodar la información de tal forma que parezca que el texto está en una pequeña burbuja. Para la flechita tenemos que poner el ancho y altura a 0 y jugar con los tamaños de los bordes. Pareciera que es como un bug que podamos formar triángulos así de fácil pero pues si, es muy fácil.

Por último tenemos la configuración del amigo, que en términos generales es la misma que la del autor, pero hay que alinear algunas cosas a la derecha para que no se vea tan monótono que todo salga de un mismo lado.

Conclusiones

Si se fijaron bien es más estilo que posicionamiento de elementos, siempre y cuando tengamos en el HTML el orden correcto de los mismos. Espero les haya gustado el tutorial y como les mencionaba, voy a ver la posibilidad de hacer funcionar este chat empleando cosillas más avanzadas.