Mensajes simples en CSS

La necesidad de avisarle a un usuario de un sitio web que ocurre un evento de sistema es moneda corriente en el desarrollo. Puede ser por requerimiento de datos, información general o específica, resultados de validación o casi cualquier otra cosa donde el sistema le pide al usuario que le preste atención a algo.

Hay muchísimas formas de hacer esto, desde los prehistóricos popups en javascript, hasta modernos modals, pasando por las paginas de información y redireccionamiento. Pero un recurso muy utilizado, sencillo y efectivo es utilizar una cajita de color con el aviso. También hay decenas de ejemplos para hacer efectiva ésta técnica, pero la mayoría o redundan en código o complejizan algo que debería ser muy sencillo.

Este snippet lo utilizo para hacer mensajes simples en CSS, con muy poco código, fácil de modificar y escalable.

Simple

Lo primero que tenemos que hacer es definir la caja, y le vamos a asignar las propiedades que sean comunes a todos los mensajes (fuente, margenes, ancho). Es importante señalar que estos valores se pueden cambiar dependiendo donde los vamos a mostrar y la información que le vamos a poner dentro.

CODIGO CSS

Luego definimos cada tipo de mensaje que queremos usar. Empezamos con el más común de todos, un mensaje de información: LEER EL RESTO