Home About Afiliação? Afiliados Reviews Tutoriais Extras +Follow

05 dezembro 2013

Efeitos nas Imagens dos Posts ~ Tutorial

Heey, criaturas!
Como amanhã eu irei pra casa da minha (Um lugar com muita comida e bem tranquilo, ótimo pra ler!) e voltarei apenas no sábado, não poderei postar então trouxe um Tutorial rápido e fácil, mas que deixa as imagens dos seus posts do blog com efeito automaticamente quando passa o mouse. Assim como as imagens daqui, podem ver que quando passam o mouse elas ficam preto e branco, legal né? ;3
Primeiramente, óbvio, você deve acessa seu blogger e vai até "Modelo". Clique em "Editar HTML" e em seguida, aperte Ctrl + F e procure por ]]></b:skin> , após encontrá-lo escolha um dos códigos abaixo e cole em cima dele. Salve e visualize ;3

Efeito Sépia
 

img {
-webkit-filter: sepia(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: sepia(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

Efeito preto e branco
 

img {
-webkit-transition: all 1.1s ease;
}
img:hover {
-webkit-filter: saturate(0%) ;
}

Efeito borrar
 

.post img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post img:hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-filter: blur(2px); color:#FF1493;
}

Efeito Negativo
 

img{ -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear } img:hover{-webkit-filter: invert(100%);z-index: -99px;}

Simples. Testem e vejam qual combina melhor com seu blog, espero que usem. Como puderam notar, eu só usei fotos de Ulzzangs garotos pra deixar o ZN mais fofo e bonito, principalmente pras meninas, se bem que esse último está com uma cara de idiota e.ê
Até mais!
Créditos ao Unicorn Paradise.

12 comentários:

  1. hehe, gostei do tutorial, simples!! Eu não vou colocar porque meu theme já é meio bugadinho, se eu mexer é capaz de explodir <.< >.> e eu odeio quando o blog tem bastante imagens mas ele coloca efeitos, eu passo o mouse por cima pra abrir e ver melhor e ele muda de cor ou sei lá o quê HEUEUHEUE

    Kissus~

    ResponderExcluir
    Respostas
    1. Obrigada! SHAUSHAUASH' Sei como é isso e.ê

      Até o/

      Excluir
  2. kkkkkk, esse ultimo efeito ficou bem legal kkkkkk, principalmente essa foto kkkk!
    Tane, tenho algumas tags pra você:

    ||Sendo um Otaku - Tags||

    - Blogosfera;
    - Instrumentos Musicais;
    - Sou contra o Plagio.

    Não e obrigado a responder n viu, e não precisa responder todas, responde uma.
    Abraço.

    ResponderExcluir
    Respostas
    1. shaushaush' Também achei e.ê
      Eu gosto de fazer, prometo que post assim que possível u.u

      Excluir
  3. Pois é, como é que eu nunca aprendi a fazer o último? Arigatou por acabar com essa minha parcela de ignorância >.<

    sou-uma-adolescente.blogspot.pt // Forever Sapo

    ResponderExcluir
    Respostas
    1. hsauhsuah' há muitos efeitos desconhecidos mesmo x.x

      Excluir
  4. Kkkkkk que bonitinho aquele ursinho enfiando o dedo no nariz >///////////< kkkk esses asiáticos são fofos de qualquer jeito :3
    Bom, talvez eu usa no meu próximo lay, eu já to fazendo ele, acho que vou colocar aquele de borra :3

    ~Kissus

    ResponderExcluir
    Respostas
    1. Sim, até sendo porcos eles são fofos, agora vai tentar fazer algo assim, não chega nem perto aushaushau'
      Fico feliz que vá usar algum ;3

      Excluir
    2. Kkkkkkk sim, eu amo esses imbecis <3 Eu vou me casar com um japa -u- Se o destino quiser, é claro :v
      Já to colocando no meu blog :3

      Excluir
    3. hsauhsau' São mesmo amáveis <3 Minha irmã tem esse mesmo desejo e.e
      Obrigada ;3

      Excluir
  5. Vejo muitos tutoriais que ensina as imagens que dá efeito quando passa mouse em cima da imagem, porém nunca tinha visto efeito negativo o.O É uma novidade!!!

    Obrigada pelo elogio Tane-chan! o/
    Deu muito trabalho, ate pensamos em desistir de tanto trabalho que deu... Mas no fim deu tudo certo e se livrarmos disso!! \o/

    kiss
    http://tsuki-no-shita.blogspot.com

    ResponderExcluir
    Respostas
    1. shaushau' Esse é pouco conhecido mesmo..
      De nada, que ótimo que não desistiram, o trabalho ficou realmente bonito *-*

      Excluir

Regras:
- Respeite a opinião dos outros.
- Se tiver errado algo na postagem, pode comentar avisando (:
- Não me venha com "Seguindo, segue de volta?".
- Não comente apenas para divulgar seu blog.
- Pode comentar e colocar o link no final.
- Responderei a todos.
- E por favor, diga o que pensa, opine! ;3