12/12/2012

Borda redonda nas imagens + Com opacidade


Yo minna-san!!! Hoje trago mais um tutorial, de como colocar bordinhas arredondadas nas imagens do blogger, essa post foi em pedido de Isabelle, dona do blog Galaxy Unicorn (não esqueçam de fazer uma visitinha). Mas agora vamos ao tutorial do dia, vou mostrar como adicionar as bordas, e depois com opacidade.

1. Vá ate seu  HTML e procure por ]]></b:skin>, e acima dele adicione esse código:

Códigos
.post img{-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; }

Onde esta escrito: radius: 8px; e o tamanho das bordas, quanto maior o numero, mais redondinho vai ficar, todos devem ficar em tamanhos iguais para ficar redondo. Agora é só salvar!

2. Se deseja usar com opacidade, coloque então esse código acima de ]]></b:skin>, ele já esta prontinho é só adicionar:

Códigos
.post img{-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; -webkit-transition-duration: .20s;filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.70;}
.post img:hover{filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;-webkit-transition-duration: .20s;
}

A parte que esta em itálico, e a opacidade e o mesmo código que mostrei a cima de bordas apenas acrescentei o efeito, então não precisa usar os dois que mostrei apenas um. Bom espero que tenha ajudado. Beijokas e ate a próxima post. ^^

5 comentários:

  1. obgggg mesmo!!!!!!!! ameii ficou mtt fofinho!!! dá pra botar esses dois juntos neah??
    bjsss ^^

    ResponderExcluir
  2. Obrigada >< Ajudou muito!!! Seu blog já ta na listinha de créditos do meu blog.

    http://believe-tj.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Não foi nada, fico contente que tenha lhe ajudado

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345