Efeitos para imagem do blog

Hello, darlings(・∀・) Como estão? Algo novo? Me contem, quero saber as novidades haushuashu -q Enfim, estou terminando de escrever a fanfic, eu acho que está até legalzinha, mas esperem para ver ♥ Minha vida anda meia corrida, e estou tentando fazer outro layout, dessa vez para quando chegarmos aos 20 follow's, já que da ultima vez me apressei e postei o lay free antes da hora aushauhaus :v. Trago pra vocês alguns afeitos para usar nas imagens do blog, no post por exemplo; No total são 3, espero que gostem! Let's go? Enjoy, pimpas ~
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 ♥

14 comentários:

  1. Adoro esses efeitos. Para mim um layout não é layout sem essas coisas lindas que dão um toque a mais, haha.

    Beijos, Vi | oh-edition.blogspot.com.br

    ResponderExcluir
  2. Bem, e você? Poxa, nem tenho novidades ASUHSAUH'
    Eu 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

    ResponderExcluir
    Respostas
    1. Bem também. Que pena huahsua >3<
      Preto e Brancofica lindo mesmo :3 Obrigada.

      Beijos!

      Excluir
  3. Vou usar algum para complementar meu layout \OuO\
    tenho nenhuma novidade, sabe?
    Byee ~
    http://blue-velt.blogspot.com.br/

    ResponderExcluir
  4. Oii *3* Fanfic ? Fiquei curiosa... Novidades ? Ixi, é o que mais está faltando por aqui :P
    Amei 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 ♥

    ResponderExcluir
    Respostas
    1. Maoe u_u Sim, mas já está disponibilizada até o capitulo 3, ok? >3<
      São lindos, não? Também gosto do blur!

      Beijos *3*

      Excluir
  5. Lindo,acho que vou usar no meu próximo lay >.<
    http://retrair-se.blogspot.com/

    ResponderExcluir
  6. 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
    Beijoo.

    ResponderExcluir

• Não comente apenas um link para divulgação, comente algo sobre o post.
• Pode utilizar palavrão desde que não ofenda ninguém.
• Aceito afiliação e tags, menos selinhos.

Layout criado por vizoca para uso exclusivo do blog colored cotton. Cópias totais ou parciais devem ser consideradas plágio