Dezembro 12, 2008

Caixas de mensagens em CSS para o seu blog WordPress

Publicado em Programação, Wordpress| Tags: caixa, código, css, html, mensagens

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador para uma determinada alínea.

No artigo abaixo irei partilhar alguns estilos CSS para as suas caixas de mensagens e ensiná-lo a implementá-las no seu blog.

Faça o download do código fonte (HTML + CSS) das caixas de mensagem abaixo ilustradas por aqui.

Caixa de mensagens simples

O código HTML é bastante simples:

<div class="clean-gray">Clean message box</div>

..uma DIV class com algum texto.

O CSS será qualquer coisa do género:

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

Caixa de mensagem com ícones

A caixa de mensagem com ícone pode ser bastante favorável quando se tenta passar uma mensagem seja ela uma nota, um erro, uma atenção ou uma proibição.

O código HTML é igual ao anterior:

<div class="clean-gray">Clean message box</div>

..e o código CSS:

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

Se por acaso estiver à procura de ícones para personalizar as suas caixas de mensagens pode fazer o download do Sweetie Icon Pack 1. Abaixo pode ver o conteudo do pack.

Download Sweetie Icon Pack

Use e abuse dos ícones, personalize as suas caixas de mensagens ao máximo.

Caixa de mensagem sólida

Nada mais simples! Uma caixa de mensagem sem border (contorno) e com a cor do texto como contraste com a cor de fundo da caixa.

Código HTML:

<div class="solid-green">Solid message box</div>

..e o codigo CSS:

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

Caixas de mensagens de curvas redondas

As curvas redondas nestas caixas de mensagens estão oposta na diagonal a si mesmas, ou seja, as curvas redondas só existem no top-left e no bottom-right ou vice-versa. Estas curvas redondas adaptam-se automaticamente à largura e à altura da caixa.

O HTML:

<div class="round-a-gray">
<div>Alternated rounded borders message box</div>
</div>

O código CSS é:

.round-a-gray{
background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.round-a-gray div{
background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;
}

Caixa de mensagem estilo balão sólido

Apesar do nome surgir um pouco confuso, este é sem dúvida um clássico.

O HTML é o seguinte:

<div class="tooltips-gray">Solid message box</div>

e o CSS é o segunte:

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

Faça o download do código fonte (HTML + CSS) das caixas de mensagem acima ilustradas por aqui.

–

Fontes:
http://www.w3schools.com
http://woork.blogspot.com

18 Comentarios to “Caixas de mensagens em CSS para o seu blog WordPress”

Dezembro 12, 2008 às 3:51 pm
ThunderWolf no diHITT says:

Caixas de mensagens em CSS para o seu blog WordPress…

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador pa…
Dezembro 12, 2008 às 3:52 pm
Mario via Rec6 says:

Caixas de mensagens em CSS para o seu blog WordPress…

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador pa…
Dezembro 12, 2008 às 3:53 pm
domelhor.net says:

Caixas de mensagens em CSS para o seu blog WordPress…

As caixas de mensagens so cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a ateno do utilizador para uma…
Dezembro 12, 2008 às 3:58 pm
FixolaS says:

Caixas de mensagens em CSS para o seu blog WordPress…

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador pa…
Dezembro 12, 2008 às 4:03 pm
pigg.com.br says:

Caixas de mensagens em CSS para o seu blog WordPress…

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador pa…
Dezembro 12, 2008 às 4:04 pm
websapiens.net says:

Caixas de mensagens em CSS para o seu blog WordPress…

As caixas de mensagens são cada vez mais usadas na blogosfera internacional e hoje em dia a maioria dos blogs com design atractivos usa as caixas de mensagens em CSS para embelezar esteticamente o site tal como para chamar a atenção do utilizador pa…
Dezembro 12, 2008 às 4:13 pm
Márcio Gomes says:

É interessante ver quando coisa legal sepode fazer usando CSS, ótimo post!

Abraços!
Dezembro 12, 2008 às 4:48 pm
Michael says:

Muito bom o blog! Ta em meus favoritos (: parabéns!

Michael publicou o seguinte artigo, Teaser Estágio Já
Dezembro 12, 2008 às 7:17 pm
ThunderWolf says:

@ Márcio Gomes, obrigado pelo comentário. O CSS é uma linguagem de programação muito poderosa, o que permite a uma grande personalização de uma página web. Abraço!

@ Michael, obrigado pelo comentário. Ainda bem que gostou. Espero vê-lo por cá. Abraço!
Dezembro 14, 2008 às 4:06 pm
Coisinhas.NET » Blog Archive » Caixas de mensagens em CSS para o seu blog Wordpress says:

[...] do código fonte (HTML + CSS) das caixas de mensagem abaixo ilustradas por aqu Veja o post completo clicando aqui. Post indexado de: [...]
Fevereiro 9, 2009 às 4:22 pm
sssfw says:

vbbvsss
Março 1, 2009 às 9:28 pm
andré says:

oi… eu queria uma caixa de mensagens igual essa sua

andré publicou o seguinte artigo, Como todo filme FALHA NOSSA
Março 2, 2009 às 1:13 pm
ThunderWolf says:

Olá André,
Leia o artigo que vai ver que facilmente consegue obter caixas de mensagens tal como as acima mostradas. Ficam um mimo em qualquer tema.

Abraço!
Março 4, 2009 às 2:57 pm
john Gomre says:

Hallo, guter informativer Blog. Echt lesenswert macht weiter so!
Março 18, 2009 às 3:00 pm
filipa says:

oi

filipa publicou o seguinte artigo, Bem-Vindos Visitantantes
Março 31, 2009 às 5:47 pm
traza says:

Gracias por el aporte
Novembro 25, 2009 às 2:39 pm
Pudim says:

Olá pessoal, tudo bom ?
Maio 3, 2010 às 8:12 am
Rafael Guimaraes says:

blablabal parabens por tudo ok?