7 de ago de 2012

tutorial - borda e opacidade.



Oie :3 

hoje eu trago um tuto de como deixar as imagens com borda e opacidade quando passa o mouse por cima, aqui no blog, é exatamente o contrário, quando você passa o mouse em alguma imagem a opacidade sai e a borda também, dá um efeito muito agradável, espero que gostem ~

1 - Procure por ]]></b:skin> e acima cole:

/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;}img:hover {filter: alpha(opacity=60);opacity: .6;-webkit-border-top-right-radius:10;-webkit-border-top-left-radius:10;-webkit-border-bottom-right-radius:10;-webkit-border-bottom-left-radius:10;}img:hover {filter: alpha(opacity=60);opacity: .60;border: 0px dotted #000000;border-radius: 10px;-moz-border-radius: 10px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;} 

                                           personalize a vontade e salve :)

                                                                     Tchau :3

2 comentários:

  1. *WEEEEEEEEE* Sugoi , sugoi Maa-Kun ! *uuu* acho tão kawaii essas imagens personalizadas >w< , menos aquelas que você passa o rato ~Le eu com minha mania de falar isso em vez de mouse o3o~ que a imagem fica maior o3o ou vira e fica de cabeça pra baixo o3o ou coisas do tipo , tenho ódio mortal U3U Essas pessoinhas não sabem colocar algo mais ... simples ? a-a ~

    ResponderExcluir
    Respostas
    1. concordo, essa coisas muito coloridas ou chamativas deixam o blog meio feio ~falo memo~ quando eu coloquei esse efeito veio com uma borda gigante, ai eu modifiquei para ficar essa bordinha pequena e kawaii >3<

      obrigado o3o, a do seu blog ~que é o mesmo tutorial que esse~ é bem lecal 030)b

      Excluir