Mensagem de Alerta com Css

Mensagem de Alerta com Css

Neste artigo vamos fazer aquelas mensagens de alerta muito utilizado em sistemas de cadastro.

é bem simples de fazer, porém pra quem não tem muito conhecimento em css isso pode ajudar.

Veja o código abaixo:

Html

<div class="msg-alertas">

     <span class="ms erro"><i class="icon icon-hand-paper-o"></i> Erro ao cadastrar !</span>
     <span class="ms ok"><i class="icon icon-users-1"></i> Cadastro realizado com sucesso !</span>
     <span class="ms alerta"><i class="icon icon-alert-1"></i> Preencha todos os campos !</span>
     <span class="ms info"><i class="icon icon-info-1"></i> Bem vindo !</span>

</div>

Vamos Adicionar o Css

.msg-alertas{ 

     width:100%; 
     overflow:hidden; 
     margin:0 auto; 
     padding:10px; 
     background-color:#FFFFFF; 
} 

.ms{ 

    width:100%; 
    margin:auto;  
    padding:1em; 
    float:left; 
    display:block; 
    margin-bottom:10px;
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-weight:100; 
    font-size:16px;
}
	 
.erro   { background-color:#FFCACA; border:2px #a60202 solid; color:#a60202; border-radius:5px; }
.ok     { background-color:#A6FFBC; border:2px #00bd00 solid; color:#00bd00; border-radius:5px; }
.alerta { background-color:#FFFFBF; border:2px #2b2b2b solid; color:#2b2b2b; border-radius:5px; }
.info   { background-color:#B3E7FF; border:2px #018ace solid; color:#018ace; border-radius:5px; }

Baixar Código Veja Funcionando