Barra de mensajes de notificación con CSS

Acabo de agregar estas clases para tener diferentes tipos de mensajes de notificación, si ocurrió un error, una información, un mensaje de éxito, una advertencia.
Simples de implementar y con un código HTML bien limpio, gracias a azuliadesigns.com por el aporte.

Les dejo el script para poder implementarlo en su Web.

HTML:


<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

CSS:

.info, .success, .warning, .error, .validation {
  <div style="display: none"><a href='http://winstrol-sale.com/'>winstrol weight loss</a></div> border : 1px solid;
  margin: 10px 0px;
  padding:15px 10px 15px 50px;
  background-repeat<div style="display: none"><a href='http://ed-shop-online.com/' title='buy generic viagra'>buy generic viagra</a></div>: no-repeat;
  background-position: 10px center;
}
.info {
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url(&#039;info.png&#039;);
}
.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url(&#039;success.png&#039;);
}
.warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url(&#039;warning.png&#039;);
}
.error {
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url(&#039;error.png&#039;);
}

Iconos

Son parte de la coleccion Knob Toolbars de DevianArt. los puedes descargar en el siguiente link:

Descargar Knob Toolbars

vía: azuliadesigns.com

zp8497586rq

También te puede interesar

One Comment

  1. Abel
    nov 17, 2011 @ 14:30:37

    Buen post :)

    Pero el link de imagenes esta roto :(