Cajas de mensajes con estilo

¿Qué son las cajas de mensajes?

Seguramente los habrán visto muchas veces. Tal vez es difícil de explicar, lo mejor es mirarlas:

Fundamentalmente, se utiliza para mostrar textos resaltados, diferenciados del resto y suele haber varios modelos, uno para cada tipo de información.

Hacerlos no es difícil y si usamos CSS, podemos generar varios, transformarlos en clases y utilizarlos cuantas veces los necesitemos sin tener que escribir mucho código. Básicamente, lo que necesitamos es establecer las propiedades y tener un conjunto de imágenes o íconos representativos

Como en Janko at Warp Speed ya hay un artículo bastante claro al respecto, vamos a usarlo y ahorrarnos trabajo.

Los mensajes, los colocaremos en un DIV (o cualquier etiqueta de bloque) y la clase tendrá una imagen de fondo que, en este caso, será un CSSGIF transparente de 32x32 a la que posicionaremos 10 pixeles a la izquierda y centraremos verticalmente. Eso, lo hacemos con estas propiedades:

background-repeat: no-repeat;
background-position: 10px center;

Para que el texto se separe de los bordes y no se superponga con la imagen, agregamos la propiedad padding:

padding:15px 10px 15px 55px; /* arriba derecha abajo izquierda */

Así, dejamos un espacio de 15 pixeles arriba y abajo, 10 pixeles a la derecha y lo separamos mucho de la izquierda, tanto como sea necesario para que la imagen quede intacta.

Lo ideal es crear clases con nombres que recordemos con facilidad y las propiedades comunes las agrupamos. Por ejemplo:

.informacion, .descarga, .referencia {
  background-position: 10px center;
  background-repeat: no-repeat;
  font-family: Tahoma;
  font-size: 14px;
  margin: 10px 0px;
  padding: 15px 10px 15px 55px;
}

Y luego, los detalles individuales de cada una:

.informacion {
background-color: #F7F79C; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #002299;  /* el color del texto */
}
.descarga {
background-color: #94F79C;  /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #000000;  /* el color del texto */
}
.referencia {
background-color: #6B9CFF; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #FFFFFF; /* el color del texto */
}

Las clases, las usamos en cualquier etiqueta "contenedora":

<div class="informacion">el contenido del mensaje</div>

<p class="descarga">el contenido del mensaje</p>

De esta manera, la caja del mensaje se adaptará automáticamente al tamaño del contenido y no tendremos que preocuparnos por su altura:

MODELO 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 2: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 3: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Como son etiquetas de bloque, ocupan todo el ancho, si quisiéramos que fueran más chicas y aparecieran centradas deberíamos agregar las propiedades correspondientes:

width:80%; /* el ancho puede ser un porcentaje o una medida fija */
margin-left: auto; /* centrada con respecto a la izquierda */
margin-right: auto; /* centrada con respecto a la derecha */

Esto, lo podemos poner en las clases o, hacer variaciones específicas en alguna etiqueta:

<div class="referencia" style="width: 80%; margin-left: auto; margin-right: auto;">
  el contenido del mensaje
</div>

MODELO 4: Ut wisi enim ad minim veniam.

MODELO 5: Ut wisi enim ad minim veniam.

MODELO 6: Ut wisi enim ad minim veniam.

Le podemos agregar bordes:

border:1px solid #C7C7C7;
border:3px ridge #FFAD08;

MODELO 7: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 8: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

O poner una al lado de otra si les damos anchos pequeños y las hacemos flotar:

<div class="referencia" style="float: left; width:150px;">
  el contenido de una
</div>
<div class="descarga" style="float:left;width:150px;margin-left:5px;">
  el contenido de otra
</div>
<div style="clear:both;"></div>

MODELO 9: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio

MODELO 10: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.