Caixa de Mensagem em CSS

Mar 23, 2008 I CSS, Dicas.

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.
caixa de mensagem

Alguns Exemplos:

<div class="caixa-mensagem">Dica de Caixa de Mensagem</div>
.caixa-mensagem{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}
<div class="caixa-icone">Caixa com Icone</div>
.caixa-icone{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}
<div class="caixa-solida">Caixa Solida</div>
.caixa-solida{
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}
<div class="caixa-aredonda"><div>Caixa de Mensagem Arredondada</div></div>
 .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;
}
<div class="caixa-dica">Caixa de Dica<div></div></div>
.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

Leave a Reply