Criando barra de notificações com css

Olá pessoal todo site que se preze tem requisições e estas sem retornam alguma coisa para usuário, é nessa hora que se faz o uso das barras de notificações, alguns sites usam lightbox, outros simplesmente fazem uso do alert('Alguma coisa'); do javascript, enfim. Existem sites que usam as barras de notificações e são estas que eu estarei demonstrando nesse post.

Demo Download do código fonte

Vamos criar um estrutura html básica somente para visualizar os boxes

Usuário, seja bem-bindo!


Aviso: Existem 5 comentários não aprovados


Erro: Houve um erro o processar seu pedido.


Sucesso: Produto adcionado com sucesso!

Com a estrutura de html criada e com os nomes das classes css escolhidos agora a começar a estilizar os boxes. Notaram o span no meio da mensagem? Ele servirá para darmos ênfase a uma determinada informação na notificação e ainda será nele que inseriremos a imagem de alerta.
Vamos ao código Css

.box_info {
 border-width:1px;
 border-style:solid;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size:14px;
 text-align:center;
 padding:10px 0;
 width:960px;
 display:block;
 margin-bottom:2px;
}

Neste ponto setamos as propriedades css que todos os boxes terão em comum vamos adicionar as propriedades css que todos os spans terão em comum.

.box_info span {
 padding:5px 5px 5px 35px;
 font-weight:bold;
 font-size:16px;
 background: url(../img/notifications_icons_set.png) no-repeat;
}

Começaremos agora com as definições de cada tipo de notificação.

.aviso {
 background-color:#FFF4CC;
 border-color:#F8E3AC;
 color:#E79300;
 
}
.info {
 background:#E4EDF5;
 border-color:#E5EBF0;
 color:#2E74B2;
}
.erro {
 background-color: #FBD3B1;
 border-color:#F7D1AE;
 color:#CE2700;
}
.sucesso {
 background-color:#E0F2CB;
 border-color:#E7F6D8;
 color:#6DA827;
}

Neste ponto as barras de notificações já estão praticamente criadas e precisam somente das imagens correspondente a cada tipo de notificação, e como já tínhamos configurado o background antes, estaremos estilizando somente a posição da imagem de fundo dos spans.

.aviso span{
 background-position:0 -133px;
}

.info span{
 background-position:0 2px;
}

.erro span{
 background-position:0 -88px;
}

.sucesso span{
 background-position:0 -44px;
}

Bem simples porém muito funcional. Que tal agora fixarmos as barras sempre no topo de página para que o usuário ou a própria página não precise dar um scroll até o topo para visualizar a msg?>
Substitua somente as propriedade da classe .box_info para:

.box_info{
 border-width:1px;
 border-style:solid;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size:14px;
 text-align:center;
 padding:10px 0;
 border-radius:5px;
 position:fixed;
 top:0;
 width:960px;
 display:none;
 z-index:1000;
}

Tags: barra de notificações, css