Imagem do post com bordinha e opacidade


Tumblr_mk6ma5ec7w1qhovdro1_500_large
Yo ! Boa noite, hoje eu trouxe um tutorial de como colocar a imagem com bordinhas redondas e opacidade, igual tem aqui no blog, é bem fácil e simples, se reblogarem não se esqueçam dos créditos. Créditos: bc e jm

Procure por ]]></b:skin>, e acima dele cole:

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

Onde está escrito: radius: 8px; e o tamanho das bordas, quanto maior o numero, mais

 redondo fica, todos devem ficar em tamanhos iguais para ficar redondo. Agora visualize
 e salve.

Se quer ter as imagens com opacidade, coloque esse código acima de ]]></b:skin>

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;
}

4 comentários:

  1. Adorei o tutorial *uu* Testei no meu blog de testes e o efeito ficou shooooow *---* Adorei o gif do começo, ASHUASUH'

    -Epílogos e Finais.

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado !! :D beijos;

      Excluir
  2. Acho lindo esse efeito também ^-^ ótimo tutorial!

    Beijos
    Too Kawaii

    ResponderExcluir