Efeito Preto e Branco
É um efeito bem simples, mas eu acho que ele é bem legal. Clique aqui e veja a preview, pimpa (●⌒∇⌒●)
♡ Vá em seu quadro HTML e procure por ]]></b:skin, assim que achar a tag, cole esse código acima:
.pb { -webkit-transition-duration: .90s; } .pb:hover { -webkit-transition-duration: .90s; -webkit-filter: grayscale(100%); }Salve. Vá agora na aba 'Layout', e cole esse código em uma Gadget HTML/java Script ou no HTML da postagem:
<img src="link da imagem" class="pb">Salve e vizualize se estiver tudo certo ~
Efeito Desfoque - Blur
Quando você passa o mouse na imagem, ela fica 'desfocada'. Clique aqui e veja a preview ~ (・∀・)
♡ Vá em seu quadro HTML e procure por ]]></b:skin, assim que achar a tag, cole esse código acima:
.border1 {background:#fff; padding:1px; border:5px solid #d5c9e8; margin:1px; -webkit-transition-duration: .99s; -moz-transition-duration: .99s;} .border1:hover {filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); border:5px solid #d5c9e8;}Salve e visualize. Vá na aba 'Layout' ou no HTML da postagem, e cole esse código:
<img src="LINK DA IMAGE" width="Largura da Imagem" align="left" class="border1">Salve e visualize ~
Efeito Opacidade
Quando você passa o mouse, e imagem fica mais 'clarinha', é bem fofinha :3.
♡ Vá em seu quadro HTML e procure por ]]></b:skin, assim que achar a tag, cole esse código acima:
.main img { filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } .main img:hover { filter:alpha(opacity=82); -moz-opacity:0.82; opacity:0.82; }Daí, é só salvar, e automaticamente suas imagens já vão estar com o efeito hover de opacidade!
Espero que tenham gostado do post de hoje, gatosos! Um beijão ♥
Adoro esses efeitos. Para mim um layout não é layout sem essas coisas lindas que dão um toque a mais, haha.
ResponderExcluirBeijos, Vi | oh-edition.blogspot.com.br
Concordo, Le >3<
ExcluirBeijinhos ~
Amo efeitos nas imagens, principalmente de opacidade!
ResponderExcluir♡ b a b y · BOO
Eu também >3<
ExcluirBem, e você? Poxa, nem tenho novidades ASUHSAUH'
ResponderExcluirEu já usei efeitos em imagens em layouts antigos, e o que eu mais gosto é o preto e branco :3 Ótimo tutorial!
htmlandresources.blogspot.com.br
Bem também. Que pena huahsua >3<
ExcluirPreto e Brancofica lindo mesmo :3 Obrigada.
Beijos!
Vou usar algum para complementar meu layout \OuO\
ResponderExcluirtenho nenhuma novidade, sabe?
Byee ~
http://blue-velt.blogspot.com.br/
Vai ficar lindo!
ExcluirSem novidades? Sei como é OuO'
beijos >3<
Oii *3* Fanfic ? Fiquei curiosa... Novidades ? Ixi, é o que mais está faltando por aqui :P
ResponderExcluirAmei esses efeitos, dão um toque todo especial para as imagens e o melhor é que são muito fáceis e práticos de aplicar ! O meu preferido foi o segundo <3
~kiss
CS ♥
Maoe u_u Sim, mas já está disponibilizada até o capitulo 3, ok? >3<
ExcluirSão lindos, não? Também gosto do blur!
Beijos *3*
Lindo,acho que vou usar no meu próximo lay >.<
ResponderExcluirhttp://retrair-se.blogspot.com/
Ok, vai ficar lindinho >3<
Excluirbeijos~
Não tenho muita experiência com HTML, mas já usei esses efeitos e ficam fofos, deixam a imagem bem legal. Fanfic?? Vou dar uma lidinha :D
ResponderExcluirBeijoo.
Ficam fofos, não é? >3<
ExcluirOk! beijinhos ~~