Efeito moldura

Bom dia, minna chan ^^ Hoje sim, trago um efeito exclusivo, que criei acidentalmente mas de que me orgulho bastante. Chamei-lhe efeito emoldurar, porque passa de uma espessa opacidade nas bordas da imagem a uma espécie de moldura clarinha, com uma sombra ligeira, opacidade na imagem e outline. Oh god, achei que fiquei tão fofo :3 E se calhar nem é nada de especial, mas é o que dá. Criei o efeito para um lay free, e agora só me apetece usá-lo. Talvez um dia >.< Ah, não liguem à má qualidade da prévia, eu só uso uns gifs toscos porque eu não crio um blog para cada layout que invento, então para que não desapareça, eu uso em imagem.

Prévia (www):

No seu HTML, cole acima de /b:skin

.moldura {

padding: 4px;

border: 1px solid #ffffff;

max-width: 600px;

height: auto;

border-radius: 1px;

outline: solid 15px rgba(255, 255, 255, .5);

outline-offset: -15px;

-webkit-transition-duration: .60s;

}

.moldura:hover {

opacity: 0.70;

outline-offset: -5px;

outline: 1px dashed #e6535c;

box-shadow: 0px 0px 3px #cf484f;

-webkit-transition-duration: .60s;

}

Prontinho, agora é só aplicar normalmente. Podem mudar as cores, se quiserem, e mudar a espessura da outline ou da borda se o souberem fazer bem. Aqui está o código de aplicação:

<img src="URL" class="moldura" />

Ja nee ^^