12/12/2012

Tutorial: 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.
Vá ate seu  HTML e procure por ]]></b:skin>, e acima dele adicione esse código:

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

.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

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram