Crear mensajes con CSS

Haciendo uso de CSS podemos mostrar de una manera practica y sencilla unos mensajes que sirven para manifestarle al usuario sobre alguna información o aviso.

Si necesitas alguno, esta es la entrada ideal, para ello vamos a ver los siguientes ejemplos:

Solo coloca el código CSS antes de ]]></b:skin>(Buscandolo en tu plantilla con Ctrl+F) y el HTML en la entrada o como elemento HTML/Javascript.

/* Mensaje de información */
.informacion {
background: #BDE5F8 url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #00529B;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #00529B;
border-bottom: 5px double #00529B;
}

<div class="informacion">
Mensaje de información
</div>

/* Mensaje de éxito */
.exito {
background: #DFF2BF url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #4F8A10;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #4F8A10;
border-bottom: 5px double #4F8A10;
}

<div class="exito">
Mensaje de éxito
</div>

/* Mensaje de alerta */
.alerta {
background: #FEEFB3 url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #9F6000;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #9F6000;
border-bottom: 5px double #9F6000;
}

<div class="alerta">
Mensaje de alerta
</div>

/* Mensaje de error */
.error {
background: #FFBABA url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #D8000C;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #D8000C;
border-bottom: 5px double #D8000C;
}

<div class="error">
Mensaje de error
</div>

/* Mensaje de ayuda */
.ayuda {
background: #0080FF url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #0080DD;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #0080DD;
border-bottom: 5px double #0080DD;
}

<div class="ayuda">
Mensaje de ayuda
</div>