Mostrar alertas con CSS
Mostrar alertas de una forma elegante mediante CSS es posible y el siguiente código muestra un ejemplo de ello. El código es fácil de interpretar y los divs se ajustan al contenido.
El código CSS necesario para mostrar las alertas de un forma bastante elegante podría ser el siguiente:
.info, .correcto, .ojo, .error, .validation { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:left; width:auto; } .info { color: #00529B; background-color: #BDE5F8; background-image: url('imagenes/info.jpg'); } .correcto { color: #4F8A10; background-color: #DFF2BF; background-image:url('imagenes/correcto.JPG'); } .ojo { color: #9F6000; background-color: #FEEFB3; background-image: url('imagenes/ojo.JPG'); } .error { color: #D8000C; background-color: #FFBABA; background-image: url('imagenes/error.jpg'); }
Y en el html utilizar div’s de la siguiente forma:
<div class="info"><b>Mensaje de información.</b></div> <div class="correcto"><b>Mensaje de Ok.</b></div>
<div class="error"><b>Mensaje de error.</b></div> <div class="ojo"><b>Mensaje de precaución.</b></div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Gracias amigo por la información.
Me estoy inciando en css.
Saludos.
I believe this site has some rattling excellent info for everyone : D.