Esta es la manera que utilizo para crear cajas de mensajes en este Blog. Solo es necesario un poco de HTML y el uso de los Selectores de Atributos en CSS.

Empezamos con el “markup”. Creamos un div de clase “cajadetexto” que contendrá un texto cualquiera.

<div class=cajadetexto” rel=”info”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.</p>
</div>

También he agregado el atributo rel al que le he dado el valor “info”. Esta parte es importante, el contenido del atributo rel será el titulo de nuestra caja de texto. También necesitaremos el atributo para seleccionarlo con el CSS.

Ahora sí, el CSS. Primero una declaraciones generales:

.cajadetexto {
  position: relative;
  display: block;
  background-color: #eee;
  padding:10px;
  color:#333;
  margin-bottom:30px;
}

Hasta ahora todo bien, nada raro. Lo que hice fue definir unas propiedades de la caja, como el modo en que se mostrará, el color de fondo, margen…

Lo siguiente será crear el titulo. Entre corchetes especificamos el atributo que contiene nuestro titulo, en este caso rel, así:

.caja[rel] {
  padding-top: 40px;
}

Aquí simplemente le agregué un padding-top para que el titulo de la caja no oculte el contenido.

Ahora, con el pseudo-elemento :before le pedimos a nuestro CSS que escriba el titulo en la parte de arriba de la caja.

.cajadetexto[rel]:after {
  content: attr(rel);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
}

La propiedad content:attr(rel) dice que se debe agregar el contenido del atributo rel a nuestra caja. Con la propiedad position simplemente lo ubicamos donde queramos.

Por último definimos otras propiedades de estilo de nuestro titulo, y listo.

.cajadetexto[rel]:after {
  content: attr(rel);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   background: #09f;
   padding: 5px;
   font-size: 24px;
  line-height: 0;
  color: #fff;
  font: bold 16px Arial, Helvetica, Sans-Serif;
}

Nuestra caja de texto se verá más o menos así:

Más ejemplos:

La idea la saqué de CSS-Tricks. Diviértete creando el tuyo.