Cómo hacer un cuadro de información estilo Facebook

Facebook tiene muchos elementos muy interesantes que se pueden recrear con CSS de forma muy sencilla. El día de hoy vamos a ver cómo hacer un cuadro de información estilo Facebook, del que aparece cuando nos situamos en el nombre de un usuario o página, donde nos muestra su foto, la imagen de la portada e información y botones para añadir o enviar un mensaje.

El tutorial está para usar sólo CSS pero creo que es un excelente ejemplo de ver que para hacer elementos complejos no es necesario usar Javascript o jQuery, basta con tener una buena estructura en el HTML y un buen uso de CSS para que podamos usarlo no sólo con un elemento sino que lo podamos extender a los que queramos.

Dificultad: media

Demo del tutorial

HTML

El HTML en esta ocasión si es un poco más complejo que el de otros tutoriales, pero no es nada del otro mundo tampoco, sólo hay que notar que agrupo los elementos internos de nuestro cuadrito de información para que con CSS pueda manipularlos de forma grupal y sea mucho más fácil acomodar todo en su lugar.

CSS

Para irnos despacio dividiré bien el CSS para que lo entiendan mejor. En esta parte tenemos la configuración de toda la ficha de información, de la imagen de fondo, la imagen de perfil y el nombre de la cuenta. Lo más importante es ver que la imagen es absoluta para que se pudiera colocar entre la imagen de fondo y el recuadro blanco con la información de los likes.

A continuación está el nombre de la cuenta y una descripción pequeña

Ahora configuramos la banda blanca con el número de likes y el fondo gris para los botones de añadir y mensaje

Por último queda configurar el hover en el span y el link para mostrar la ficha, así como agregarle un padding al link.

Conclusiones

Los elementos que va agregando Facebook para dar más información a los adictos usuarios son más complejos cada vez, pero no imposibles de hacer sólo con CSS. Ahora, si tuvieramos una base de datos sería más interesante pero la base ya está para que ustedes se pongan a jugar con las posibles utilidades de estos cuadros de información.