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.
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.
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.
<div id="chat">
<div id="header-chat">
Jennifer Love Hewitt (Activo ahora...)
</div>
<div id="mensajes">
<div class="mensaje-autor">
<img src="foto.jpeg" alt="" class="foto">
<div class="flecha-izquierda"></div>
<div class="contenido">
Hola mi Jenny!!! Cómo estás??
</div>
<div class="fecha">Enviado hace tres minutos</div>
</div>
<div class="mensaje-amigo">
<div class="contenido">
Jajaja que onda señor Rivas, como está?? <br />
Yo estoy muy bien, cansada como siempre por la serie jeje :/
</div>
<div class="flecha-derecha"></div>
<img src="foto2.jpeg" alt="" class="foto">
<div class="fecha">Enviado hace tres minutos</div>
</div>
</div>
</div>
<div id="caja-mensaje">
<input type="text" placeholder="Escribir mensaje...">
<button>→ </button>
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
#chat{
background-color: #eee;
margin: 20px auto 0;
width: 400px;
}
#chat #header-chat{
background-color: #555;
color: white;
padding: 10px;
text-align: center;
text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
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.
#caja-mensaje{
background-color: #A8DCF7;
margin: 0 auto;
padding: 10px;
width: 400px;
}
#caja-mensaje input{
border: solid 1px #4193BF;
outline: none;
padding: 10px;
width: 310px;
}
#caja-mensaje button{
border: 0;
background-color: #4193BF;
color: white;
font-size: 16px;
padding: 8px;
width: 50px;
}
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.
#chat #mensajes{
padding: 10px;
height: 400px;
width: 400px;
overflow: hidden;
overflow-y: scroll
}
#chat #mensajes .mensaje-autor{
margin-bottom: 50px;
}
#chat #mensajes .mensaje-autor img, #chat #mensajes .mensaje-amigo img{
display: inline-block;
vertical-align: top;
}
#chat #mensajes .mensaje-autor .contenido{
background-color: white;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
display: inline-block;
font-size: 13px;
padding: 15px;
vertical-align: top;
width: 280px;
}
#chat #mensajes .mensaje-autor .fecha{
color: #777;
font-style: italic;
font-size: 13px;
text-align: right;
margin-right: 35px;
margin-top: 10px;
}
#chat #mensajes .mensaje-autor .flecha-izquierda{
display: inline-block;
margin-right: -6px;
margin-top: 10px;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid white;
}
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.
#chat #mensajes .mensaje-amigo{
margin-bottom: 50px;
}
#chat #mensajes .mensaje-amigo .contenido{
background-color: #3990BF;
border-radius: 5px;
color: white;
display: inline-block;
font-size: 13px;
padding: 15px;
vertical-align: top;
width: 280px;
}
#chat #mensajes .mensaje-amigo .flecha-derecha{
display: inline-block;
margin-left: -6px;
margin-top: 10px;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #3990BF;
}
#chat #mensajes .mensaje-amigo img, #chat #mensajes .mensaje-autor img{
border-radius: 5px;
}
#chat #mensajes .mensaje-amigo .fecha{
color: #777;
font-style: italic;
font-size: 13px;
text-align: left;
margin-top: 10px;
}
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.
