31 de ago. de 2012

Títulos dos gadgets "em caixas"

Com este post vocês irão aprender a deixar os títulos dos gadgets em cima do gadget e com o fundo retangular, como se fosse uma caixinha. Não entendeu? Então veja como fica lendo o resto do post:



Aviso: Antes de fazer esse tutorial, você tem que separar os gadgets da sidebar. Veja como neste post.
Depois de terminar, vá no modelo HTML do seu blog, e cole o código abaixo antes de ]]></b:skin>

.sidebar .widget {
padding: 10px;
margin-bottom: 50px; /*Espaço entre um gadget e outro*/
}
.sidebar .widget h2 {
background: #000; /*Cor do fundo do título*/
width: 150px; /*Largura do fundo, aumente se precisar*/
font-family: Verdana; /*Fonte do titulo*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: normal;
line-height: 14px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
margin-top: -30px; /*Quantos pixels o título "sobe"*/
margin-left: -10px;
padding-left: 5px;
box-shadow: 1px -1px 2px #9a9a9a;
-webkit-box-shadow: 1px -1px 2px #9a9a9a;
-moz-box-shadow: 1px -1px 2px #9a9a9a;}
No próprio código tem as explicações do que alterar. Se quiser tirar a sombra é só apagar a parte que está em verde. Espero que funcione tudo certinho aí para vocês!

Créditos: Cherry Bomb

Um comentário:


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?