Barra de mensajes de notificación con CSS

1
106

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:

[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>
[/html]

CSS:

[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;);
}
[/css]

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

1 COMMENT

Comments are closed.