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:
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!
Olhe a imagem abaixo e veja como é esse efeito afinal:
Clique na imagem para ampliar
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!
