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>

Ver ejemplo

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(8 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

2 respuestas a “Mostrar alertas con CSS”

  1. JOSE MANZANAREZ GARCIA dice:

    Gracias amigo por la información.
    Me estoy inciando en css.
    Saludos.

  2. Berna Zane dice:

    I believe this site has some rattling excellent info for everyone : D.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre