11.02.10

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
1
2
3
4
5
6
.msgbox{
font:11px Verdana,Arial,sans-serif;
margin: 10px 0;
padding:5px;
text-align: center;
width: 300px;}

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

CODIGO CSS
1
.info {background-color:#CCF; border:solid 1px #369; color:#369;}

Definimos entonces la caja en el xtml

CODIGO XHTML
1
<div class="msgbox info">Hay nuevos mensajes en tu cuenta</div>

Y ya podemos ver como nos queda:

Ahora podemos definir el resto de los estilos

CODIGO CSS
1
2
3
4
5
.neutral {background-color:#DDD; border:solid 1px #555; color:#555;}
.info    {background-color:#CCF; border:solid 1px #369; color:#369;}
.warning {background-color:#FFC; border:solid 1px #770; color:#770;}
.passed  {background-color:#CF9; border:solid 1px #393; color:#393;}
.error   {background-color:#FCC; border:solid 1px #C33; color:#C33;}

Y crear mensajes en html

CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning">Por favor actualiza tu email</div>
<div class="msgbox passed"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

Poniendole onda

Agregando solamente un nuevo estilo a nuestro CSS, y agregandole la clase a las cajas ya existentes en el html, tenemos unos bordesredondeados divinos

CODIGO CSS
1
.round {border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;}
CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral round">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info round">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning round">Por favor actualiza tu email</div>
<div class="msgbox passed round"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error round"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

Notese que solo agregamos la clase round a cada caja, sin modificar nada más.

Poniendole más onda

Se le pueden agregar unos iconos para ilustrar cada tipo de mensaje. Para eso, primero creamos el estilo icon y luego usando las propiedades de cascada le asignamos un icono por cada tipo.

CODIGO CSS
1
2
3
4
5
6
7
.icon {background-position: 5px 3px; background-repeat:no-repeat; }

.neutral.icon {background-image:url(icons/neutral.png);}
.info.icon {background-image:url(icons/info.png);}
.warning.icon {background-image:url(icons/warning.png);}
.passed.icon {background-image:url(icons/passed.png);}
.error.icon {background-image:url(icons/error.png);}

Resta solo cambiar en el html la clase round por icon, o agregarla en caso que querramos bordes redondeados ytambién iconos

CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral icon">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info icon">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning icon">Por favor actualiza tu email</div>
<div class="msgbox passed icon"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error icon"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral icon round">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info icon round">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning icon round">Por favor actualiza tu email</div>
<div class="msgbox passed icon round"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error icon round"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

Con eso nos queda una lindas cajitas de mensajes, que como dije anteriormente se pueden reusar y modificar fácilmente

Tags: ,

2 comentarios

  1. Lukillas dice:
    11.02.2010 en 7:16 PM

    Buenísimo el tutorial :) .

    Chau!

  2. temoc dice:
    27.05.2010 en 8:26 PM

    buena onda, chido por el tutorial


Escribe un comentario