Ruanceli - WebDeveloper

Caixa de mensagem são elementos úteis par mostra mensagem de status antes ou durante um requisição especifica do usuário.
Então por isso Antonio Lupetti reuniu uma coleção de alguns exemplos simples de estilos em css.

Alguns Exemplos:

Dica de Caixa de Mensagem

.caixa-mensagem{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}

---

Caixa com Icone

.caixa-icone{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

---

Caixa Solida

.caixa-solida{
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}

---

Caixa de Mensagem Arredondada

 .caixa-aredonda{
background:#444444 url(img/canto-esquerdo.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.caixa-aredonda div{
background:url(img/canto-direito.png) right bottom no-repeat;
padding:4px;
}

---

Caixa de Dica

.caixa-dica{
background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;
}
.caixa-dica div{
background:url(img/caixa-dica.png) left bottom no-repeat;
padding-top:4px;
height:18px;
}

Fonte:Woork