16 de janeiro de 2014

[Pedido] Efeito nas imagens do blog.

||
O Melhor cast para a melhor trilogia do Batman ♥ Obrigada, Christopher Nolan ♥ Tomara que Batman VS Superman não seja ruim.
Olá amores, tudo bem? Fico tão feliz que vocês gostaram da campanha (esta campanha), fico muito feliz mesmo que muita gente apoia. Enfim, ontem eu assisti o filme "A Menina Que Roubava Livros" (acho que a tradução certa seria A Ladra de Livros, mas ok) e é fantástico! Não pude comprar o livro ainda, porém, o filme é muito bom, muito mesmo. Eu chorei muito, tá, é triste demais. Mas ainda é muito bom, adorei de verdade. Demorei um pouco para perceber que quem contava a história é a morte, mas ok.

Bom, hoje eu iria trazer um pedido que foi feito na ask (www), porém, infelizmente, não poderia trazer o tutorial agora, por problemas ah, problemáticos. Por isso, hoje eu trago para vocês o tutorial de como usar estes efeitos nas imagens do post. Como o meu, tem opacidade, entenderam? Também foi feito na ask, nossa, eu esqueci disso. Bom, continue lendo :3 

1°: Vá no painel de seu blog, modelo, editar HTML, procure por "]]></b:skin", quando achar, cole o seguinte código ACIMA do código que você procurou:

Para Opacidade:
/*------ Efeito Opacidade nas imagens do Blog ------*/
.main img {
-webkit-filter: opacity(0.7);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Opacidade nas imagens do Blog ------*/
Para o Efeito "Preto e Branco":
/*------ Efeito Preto e Branco nas imagens do Blog ------*/
.main img {
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Preto e Branco nas imagens do Blog ------*/ 
Para o Efeito "Blur" (borrado):
/*------ Efeito Blur nas imagens do Blog ------*/
.main img {
 -webkit-filter: blur(3px);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Blur nas imagens do Blog ------*/ 
Para o efeito Sépia:
/*------ Efeito Sépia nas imagens do Blog ------*/
.main img {
 -webkit-filter: sepia(1);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Sépia nas imagens do Blog ------*/ 
Para o efeito Saturação:
/*------ Efeito Saturação nas imagens do Blog ------*/
.main img {
-webkit-filter: saturate(4);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Saturação nas imagens do Blog ------*/ 
Para o efeito Brightness (altera no brilho da imagem, ela fica mais escura):
/*------ Efeito Brightness nas imagens do Blog ------*/
.main img {
 -webkit-filter: brightness(0.5);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Brightness nas imagens do Blog ------*/ 
Para o efeito Hue Rotate (a imagem fica azulada, não sei direito):
/*------ Efeito Hue Rotate nas imagens do Blog ------*/
.main img {
-webkit-filter: hue-rotate(180deg);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Hue Rotate nas imagens do Blog ------*/ 
Para o efeito Invertido:
/*------ Efeito Invertido nas imagens do Blog ------*/
.main img {
-webkit-filter: invert(100%);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Invertido nas imagens do Blog ------*/ 
 Para o efeito Contraste:
/*------ Efeito Contraste nas imagens do Blog ------*/
.main img {
-webkit-filter: contrast(4);
-webkit-transition-duration: .90s;
}
.main img:hover {
-webkit-filter: none;
-webkit-transition:All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Efeito Contraste nas imagens do Blog ------*/
Bom amores, este foi a postagem de hoje. Eu trouxe todos os efeitos que eu conhecia. Se usar algum, por favor, dê os créditos, pois foi um pouco trabalhoso fazer que funcionasse. Os créditos também vão para a Mariana, do blog Chá com Anjos, que me ajudou a fazer este código. Ah, e obrigada Clara, do Kaorii pela divisória. Enfim, até mais amores :3 Espero que tenham gostado. 

52 comentários:

  1. Todos esses efeito são <3
    Vou escolher um e colocar no blog!
    Cate-land.blogspot.com.br

    ResponderExcluir
  2. A opacidade deixa o blog tão fofo.
    Com certeza eu usaria o da opacidade :3

    Abraços,
    Ser Pedro ♥

    ResponderExcluir
  3. Eu já li A Menina que Roubava Livros e eu chorei DEMAIS, sério. Leia logo porque é muito bom u_u Tô louca pra ver esse filme <3 E cara, você me deixou com mais vontade ainda!
    Adorei os efeitos, fica bem melhor quando já tem todos eles juntos num só post :3 Estou pensando em usar o efeito Opacidade ou o Brightness!

    Beijão, Yay! Pixie

    ResponderExcluir
    Respostas
    1. Eu quero comprar junto com dois outros livros (a trilogia de jogos vorazes e o lado bom da vida), parece bom. Aqui o link (www.filmesonlinegratis.net/assistir-a-menina-que-roubava-livros-legendado-online.html) para você ver :3 Onde eu vi. Verdade, muito obrigada ♥

      Excluir
  4. Nossa os efeitos parem deixar ótimos, mas o da opacidade é o que mais gosto com certeza eu eu usaria! adorei o post.
    http://aroundgi.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigada ♥ Ficam maravilhosos mesmo :3

      Excluir
  5. A minha irmã já leu o livro, e ela disse que foi o melhor que ela já leu, de tanto ela elogiar eu fiquei com vontade de ler, mas o livro era emprestado então não deu certo ç.ç Mas quero assistir o filme, deve ser muito legal :3

    Eu acho tão fofo efeitos nas imagens, o que mais gosto é o de opacidade >3< Não conhecia o de contraste, acho que no próximo lay eu uso ><

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. É bem legal, eu passo o link por facebook para você :3 Awnt, eu quero o livro agora. Verdade, são ótimos, muito obrigada ♥

      Excluir
  6. Muito legais esses efeitos :3
    Kisses, Seguindo na ask!

    inside-oficial.blogspot.com

    ResponderExcluir
  7. Que demais! Seria muito legal um efeito assim nas fotos dos comentários!

    http://leitecombiscotos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Se colocar no blog, vai funcionar nos comentários também :3 Obrigada ♥

      Excluir
  8. Wooow, acho que estão todos ai, vou favoritar, pra usar num próximo layout *-*

    Kiss, Fly Away

    ResponderExcluir
    Respostas
    1. Awnt, muito obrigada ♥ Tomara que estejam mesmo, haha.

      Excluir
  9. Eu uso a opacidade, só que sem o efeito de transição lento, gosto muito ♥
    Os outros efeitos também são maravilhosos, gostei >u<
    Quero muito assistir o filme, estou bastante ansiosa ♥
    Kiss
    With You || Imperfectous

    ResponderExcluir
    Respostas
    1. Eu passo o link do filme por ask para você :3 São mesmo, muito obrigada ♥

      Excluir
  10. Apesar de alguns leitores argumentarem que o livro AMqRL é meio... Digamos, tediante, optei por não comprá-lo. Mas é sempre bom tirar suas próprias conclusões, né? Além de que o filme é sempre meio diferente dos livros! :3

    Adorei o tutorial! Virava e mexia eu usava esse efeito, haha <3

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Verdade, mas o filme é ótimo, e o livro não parece entediante. Haha, obrigada :3

      Excluir
  11. Todos os efeitos são lindos, acho que só opacidade já deixa o blog super fofo u.u, eu acho que verei esse filme quando acabar de ver Higurashi. ^^ Beijos

    wehearthtml.blogspot.com

    ResponderExcluir
  12. Adorei os efeitos, estou usando o da opacidade! <3
    Quero testar o do preto e branco depois, acho lindinho.
    Amo aqui, sempre visito e já usei vários dos seus tutoriais, tá de parabéns!
    Um beijão, visite meu blog!

    ResponderExcluir
    Respostas
    1. Awnt, muito, muito obrigada ♥ É um prazer ajudar as pessoas. Muito obrigada de verdade ♥

      Excluir
  13. Todos esses efeitos são perfeitos, fica lindo demais nas imagens do blog <3

    http://maiira-t.blogspot.com.br/

    ResponderExcluir
  14. A Menina Que Roubava Livros, é simplesmente, um livro maravilhoso! Estou tentada a ver o filme legendado, mas vou esperar chegar na locadora aqui do meu bairro, porque depois tem para vender sem ser gravado no cinema ^.^ . Muito bom os efeitos! Quando enjoar do meu layout super simples, e fazer um novo, vou colocar um desses efeitos.

    doces-em-minha-vida.blogspot.com <- Este é o meu blog. Ele é bem novinho, foi criado hoje, por isso o lay é simples.

    ResponderExcluir
    Respostas
    1. Mas eu tenho o link que é oficial, legendado, sem ser no cinema. Procure nos comentários que irá achar :3 Muito obrigada ♥ De verdade.

      Excluir
  15. Eu ainda não vi o filme,mas se você chorou vendo o filme com o livro você vai chorar,eu não cheguei a ler o livro todo,mas eu li final e é muito triste :'( E engraçado no começo quando a morte começa a narrar,mas não vou dá spoiler :3
    Adorei o tutorial,eu acho bem útil esses efeitos =)

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. É mesmo, não dê, obrigada :3 Haha, muito obrigada ♥

      Excluir
  16. Awn, efeitos lindos, amo colocar efeitos nas imagens do blog (Não sei que milagre eu não coloquei nesse layout) *-*
    Nunca li o livro nem vi o filme de "A menina que roubava livros" mas tenho muita vontade de conhecer essa história :3 Pelo que os outros me falam, parece ser bom.
    Amei seu blog! Tão perfeito, Parabéns.
    ~Seguindo, kissus ♥

    f-lashlights.blogspot.com.br

    ResponderExcluir
  17. Esse efeito é muito fofo! Gostei muito do tutorial ;3

    Have-Things.Com!

    ResponderExcluir
  18. Olá!!! Deus seja contigo, boa noite, esse efeito é muito bom
    amei, sucesso amiga.
    Blog: http://arrasandonobatomvermelho.blogspot.com.br
    Canal de youtube: http://www.youtube.com/NekitaReis

    ResponderExcluir
  19. A menina que roubava livros,é muito bom,pelo menos gostei muito do livro,nunca assisti o filme deve ser bom :3
    Pra mim opacidade é perfeito ♥

    Eleven Days

    ResponderExcluir
  20. Nunca li A Menina que roubava livros, e nem pude ver o filme ainda D:
    Mas quero muuuuuito ver, e sobre o filme tu podia fazer uma resenha ^^
    Amei esses efeitos eu ja conhecia todos ^^

    XOXO :D || Joven Clube

    ResponderExcluir
    Respostas
    1. Verdade, mas não sei fazer resenhas de filmes. Muito obrigada ♥

      Excluir
  21. Já li A menina que roubava livros e estou doida atrás do filme D: Quantos efeitos,gent. Meu preferido é o sépia :3
    -
    snowing-wishes.blogspot.com

    ResponderExcluir
    Respostas
    1. O filme está nos comentários de cima, procure que verá :3 Muito obrigada ♥ Eu postei todos que eu sabia o código, haha.

      Excluir
  22. Pera, ainda estou babando com a imagem do post hehe
    Quanto efeito maravilhoso hein, tantas opções que fica até mesmo difícil escolher.

    Abraços,
    Revolução Nerd

    ResponderExcluir
    Respostas
    1. Haha, adoro está imagem, é minha trilogia favorita, amo o batman, superman, todo os heróis da DC são fantásticos! Haha, enfim, muito obrigada ♥

      Excluir
  23. Minha primeira vez aqui. Amei tudo & segui.
    htmlcrazy.blogspot.com.br ~retribui

    ResponderExcluir
  24. Sobre a campanha Mais Amor Por Favor, já tinham feito na minha escola, era tipo um projeto/ trabalho, mas foi com outra turma, e fiquei com muita vontade de participar, então vou aderir a a campanha, amei a idéia! :) Quero ler e assisti A menina que roubava livros, que bom que aprovou! Acho que esses efeitos são bem indispensáveis no layout, eu acho. Uso um de opacidade l lá no blog. Acho que vou usar um desses no lay que tô preparando.

    Beijos, Estante de Sonhos ~*

    ResponderExcluir
    Respostas
    1. Esse nome é mais comum do que Maria da Penha, haha. Muito, muito, muito obrigada ♥ Exato, é super importante. Obrigada novamente ♥

      Excluir
  25. Seus tutoriais são ótimos, você explica bem direitinho. Adorei! :)

    Visite-nos!
    XOXO

    ResponderExcluir
  26. Esses códigos são :oooo!
    Como você aprendeu a mexer no HTML? Parece uma coisa coisa comum na blogosfera, mas extremamente impossível pra mim. O efeito da opacidade é ótimo!
    Myllena, Minhas Pequenas Verdades

    ResponderExcluir
    Respostas
    1. Haha, muito, muito obrigada ♥ Eu fui vendo tutoriais, ás vezes você usa tanto os tutoriais, que você já sabe como fazer. Alguns blogs me ajudaram muito, como o Kawaii World. Lá tinha um tutorial de como fazer layout, aí eu aprendi. Haha, muito, muito obrigada ♥

      Excluir

Vai comentar? Obrigada Mas antes, leia por favor:

Os comentários são moderados para eu saber quem comentou, assim posso retribuir, somente por isso ok? Pode comentar o que quiser, até criticas e ofensas, mas mantenha o respeito.
Leia o post todo antes de comentar, não comente apenas para divulgar o seu blog.
Se for colocar o link do seu blog, coloque sem o "https://", pois o blogger considera spam.
Não precisa comentar "Seguindo, segue de volta?" Se eu gostar, eu sigo.
O resto pode fazer :3 Mas tenha respeito.

Obrigada novamente