Translate

Avisos html

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 limpio

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.

notificationsbars-img

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 {
  border : 1px solid;
  margin: 10px 0px;
  padding:15px 10px 15px 50px;
  background-repeat: 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

0 comentarios:

Publicar un comentario