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. Amo efeitos nas imagens, principalmente de opacidade!

    ♡ b a b y · BOO

    ResponderExcluir
  3. 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
  4. Vou usar algum para complementar meu layout \OuO\
    tenho nenhuma novidade, sabe?
    Byee ~
    http://blue-velt.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Vai ficar lindo!
      Sem novidades? Sei como é OuO'
      beijos >3<

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

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

(ノ´з`)ノ (♡μ_μ) (*^^*)♡ ☆⌒ヽ(*'、^*)chu
(♡-_-♡) ( ̄ε ̄@) ヽ(♡‿♡)ノ ( ´∀`)ノ~ ♡
(─‿‿─)♡ (´。• ᵕ •。`) ♡ (*♡∀♡) (。・//ε//・。)
(´ω`♡) ( ◡‿◡ ♡) (◕‿◕)♡ (/▽\*)。o○♡
(ღ˘⌣˘ღ) (♡゚▽゚♡) ♡(。-ω-) ♡ ~('▽^人)
(´• ω •`) ♡ (´ε` )♡ (´。• ω •。`) ♡ ( ´ ▽ ` ).。o♡
╰(*´︶`*)╯♡ (*˘︶˘*).。.:*♡ (♡˙︶˙♡) ♡\( ̄▽ ̄)/♡
(≧◡≦) ♡ (⌒▽⌒)♡ (*¯ ³¯*)♡ (っ˘з(˘⌣˘ ) ♡
♡ (˘▽˘>ԅ( ˘⌣˘) ( ˘⌣˘)♡(˘⌣˘ ) (/^-^(^ ^*)/ ♡ ٩(♡ε♡)۶
σ(≧ε≦σ) ♡ ♡ (⇀ 3 ↼) ♡ ( ̄З ̄) (❤ω❤)
(˘∀˘)/(μ‿μ) ❤ ❤ (ɔˆз(ˆ⌣ˆc) (´♡‿♡`) (°◡°♡) (* · · Ω) ノ (¯ ▽ ¯) ノ (゚ ▽ ゚) / (* '∀ `) ノ
(^ - ^ *) / (@ 'ー `) ノ ゙ ( '• ω • `) ノ (゚ ∀ ゚) ノ ゙
ヾ (* '▽' *) \ (⌒ ▽ ⌒) ヾ (☆ ▽ ☆) ( '▽ `) ノ
(^ 0 ^) ノ ~ ヾ (· ω ·) (· ∀ ·) ノ ヾ (^ ω ^ *)
(* ゚ ー ゚) ノ (· _ ·) ノ (O'ω`o) ノ ヾ (☆ '∀' ☆)
(W) / ( 'Ω `) ノ ゙ (⌒ω⌒) ノ (O ^ ^ o) /
(≧ ▽ ≦) / (✧∀✧) / (O '▽ `o) ノ (¯ ▽ ¯) / ʕ • ᴥ • ʔ ʕ • ω • ʔ ʕ • o • ʔ