25 maio 2012

Tutorial: Efeito 3D na área dos posts

Todas falam OWWN
Hey meninas lindas!
Percebi que a tag Tutoriais já estava muito desatualizada!
Queria ensinar hoje para vocês como colocar essa sombra que dá um 3D da área dos posts que nem aqui do blog. Olha:
Vi esse tuto super legal no blog Garotas Complicadas. Nesse link aqui.

Clique em Leia Mais para ver o tuto!
Aviso: Mexemos com HTML
Muito fáááácil!
Let´s Start!
Primeiro faça o tradicional caminho:
Design>Modelo>Editar HTML>Prosseguir
Agora aperte CTRL+F ou F3 e vai abrir uma caixinha de texto. Procure o seguinte código:
.main-inner .column-center-outer {
Achou? Abaixo dele, você cola esse aqui:
box-shadow: 1px 3px 15px 2px #000000;
 Tá vendo esse código em azul? Você substitui pela cor que você quer a sombra. Eu recomendo deixar assim, pois então, a sombra vai ficar preta.


Eu quero borda também Vickie! #comofaz?
Se quiser colocar borda, faça o mesmo caminho que o anterior, porém no lugar daquele segundo código você cola esse aqui:
border: solid 2px #000000;
Esse 2 vermelho aí é a grossura da borda.
O código em azul é a cor.
E se quiser mudar o estilo da borda para pontilhada, é só substituir solid por dashed.


Espero que tenham gostado!
Já sabem, qualquer dúvida call me maybe!
Beijão, Vickie♥

12 comentários:

  1. Respostas
    1. De nada, espero que tenha te ajudado! =)
      Beijao, Vickie.

      Excluir
  2. muito útil,eu adorei o tutorial!
    http://jeitointelect.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou mari! Vou fazer uma visitinha no seu blog! Bjao! -Vickie

      Excluir
  3. Super fácil colocar este efeito! rsrs Pensei em colocar neste meu lay, mas deixei queto, quem saiba no prox! rs
    Como assim numeros nos links de navegação? Explica-me pq não entendi direito! rs
    Espero a resposta u.u srrs
    jbjb

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Erica! Hahahaha, ta bom explico melhor! Vou responder no seu blog, beijao!

      Excluir
  4. Gostei do tuto, bem útil.

    http://tvfabulous.blogspot.com

    Bjs,
    Sté

    ResponderExcluir
    Respostas
    1. Que bom que gostou Sté! Vou visitar seu blog! Beijos, vickie ^^

      Excluir
  5. Oi, vi seu comentário no Jovem Ousada, fui eu que escrevi o post e fico feliz que tenha gostado! Adorei seu blog,

    Beijos

    http://depoisquecrescemos.blogspot.com.br/

    ResponderExcluir
  6. Adorei fica super legal.
    http://bonitarosa.cataaqui.com.br/

    ResponderExcluir
  7. Adorei esse Tutorial, é super útil, e fica lindo!

    Beijinhos :*
    July.
    eucapricho-ju.blogspot.com

    ResponderExcluir
  8. AAmei! Muuuito Útil ;D

    http://imcrazypink.blogspot.com.br/

    ResponderExcluir