.

05 maio 2012

Tutorial: Bordas Arredondadas e...



Olá meninas, como vão?Pra fazer esse template, eu ralei e muito! Tive que pesquisar muuitos blogs, e tinha outra versão antes dessa que resolvi mudar completamente porque confiei em mim mesma e pensei: " Sou capaz de fazer um template melhor pras minhas blogueiras".Então aqui está o resultado de tanta trabalheira!E agora, já que o blog tá de visu novo.Que tal vocês aprenderam um pouquinho de alguns códigos que podem fazer uma grande diferença no blog de vocês?!


O tutorial deste post vai ser: Como arredondar e sombrear as bordas do post e sidebar


1.Arredondando as bordas da área dos posts:


Primeiro, vá no html do seu blog, apert ctrl+f e procure por: .main-inner .column-center-outer {
em seguida coloque EMBAIXO do código que está destacado o seguinte:

-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Operaav


2. Para arredondar as bordas do sidebar:
Porcure no html por:.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { 
Se a sua sidebar fica localizada na parte direita da tela.

ou

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Se ela estiver localizada a esquerda


e cole EMBAIXO o seguinte código:


-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Operaav

Como ela vai ficar:


3. Bordas sombreadas: 

  • Na área das postagens


Para conseguir esse efeito de sombra nas bordas procure por: .main-inner .column-center-inner {   
em seguida, ABAIXO da area destacada você coloca 

box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 10px;

  • No sidebar: 
Procure por: .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {      ( se sua sidebar for na direita)

Ou

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {   ( se sua sidebar for na esquerda)

e abaixo cole: 
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 10px;


Eae? Gostaram?Comentem!


5 comentários:

  1. Muuuito legal, justamente o que eu procurava pro meu blog
    cupcakezandooficial.blogspot.com
    Bjooo.

    ResponderExcluir
  2. oi! mto bom o tuto, mas qdo eu procuro no html esse código ele diz q tem um , mas não aparece em destaque. oq eu faço?

    ResponderExcluir
  3. Obrigada pelo tuto! <3

    ResponderExcluir

Queremos muito saber sua opinião, comente e diga o que você achou!