Photobucket

12 de mai de 2008

Efeito carimbo nos seus posts

Hoje eu vou ensinar um efeito simples, mas que dá outra cara para o blog e até o deixa mais organizado, já que dá a sensação que os posts estão separados. Nunca o vi em lugar nenhum (sem alguém já tiver visto, por favor me avise), e chamo de efeito carimbo ou efeito sombra.
Olhe a imagem abaixo e veja como é esse efeito afinal:

Photobucket
Clique na imagem para ampliar

Gostou? Quer colocar no seu blog? Então, vamos lá!

ATENÇÃO: Salve um backup do seu template sempre que for alterar algo!

ESCOLHENDO A IMAGEM
Para usar esse efeito eu recomendo que você use uma imagem de uma cor só, sem muitos detalhes. È claro que você pode usar a imagem de sua prefêrencia, mas tome muito cuidado e pense muito bem antes, pois imagens coloridas e detalhadas podem acabar poluindo demais seu template.

Eu usei a seguinte imagem:



OBS: Perceba que a figura é preta, mas o fundo dela é branco, para que ela se confunda com o fundo dos posts que também é branco. Lembre-se disso quando for criar ou arrumar sua imagem: coloque o fundo da imagem mesma cor que escolher para o post.

Escolhida a imagem, upe-a em um servidor de sua preferência (Ex. Photobucket), guarde o link e vamos para a parte do código!


1º Passo - Colocar um fundo na área total de postagem

Vamos colocar a cor da área total de postagem (main-wrapper), o trecho para alterar isso é o seguinte:

#main-wrapper {
border: 1px solid $bordercolor;
background: #000000;
width: 540px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Como você pode ver na imagem o main-wrapper está em preto (background) e tem uma borda branca de 1px. Você pode alterar isso como preferir, mas eu recomendo que deixe a cor do main-wrapper da mesma cor da sua imagem, para criar um efeito vazado.


2º Passo - Definir uma cor para a postagem e adiconar a imagem de carimbo.

A postagem apenas se trata desse trecho:

.post {
margin: 20px 0 5px;
padding: 0 5px 10px 10px;
background: #ffffff url(A URL DA SUA IMAGEM AQUI) no-repeat bottom right;
}

Em azul é onde você define a cor, e na frente no lugar indicado em vermelho você põe o link da sua imagem. O que está em cinza é onde definimos onde a imagem ficará: não quero que ela se repita (no-repeat) quero que fique embaixo (bottom) e a direita (right), se você quiser que a sua imagem fique em outro lugar é só alterar essas definições.

Em verde está margin, que é a distância entre o post e a borda da área de postagem, você pode alterar esses valores como preferir, diminuindo ou aumentando a distância.

Em laranja está padding, que é a distância entre a borda (invisivel) do post e o conteúdo. Aumente e diminua como preferir também.

NOTA: Lembre-se que a ordem dos números de margin/ padding é horária: 10px (topo) 10px (direita) 10px(abaixo) 10px(esquerda).

E é isso!
Nada complicado, viram? Agora é só usar sua criatividade e modificar a gosto! Aproveitem e dúvidas, já sabem, só falar!

2 Comments:

Arthur Silva said...

Oi Roberta...
A quanto tempo?!!!!!

Não vai mais atualizar o SReVT?

Passando pra avisar de um meme pra vc lá no Via Paralela.

Daniel said...

Oie, gostaria de saber como separar postagens dos gadgets ainda hj. Eu vi aqui uma vez de 2008, mais eu nao achei o código no HTML, e gostaria q vc tirasse uma foto aonde fica o código pra separar! Obrigado deis de ja.