Efeito nas Imagens dos Posts


Olá my lovers,
Como estão?Eu estou com uma dor de garganta horrível, mas já me acostumei com isso pois sofro de hipocondria, vivo doente e achando que estou doente.Mas bem galerinha vim atender um pedido, me pediram o efeito das imagens do post do blog, e como sou legal vou ceder isso pra vocês.
Mas além do efeito do blog, trouxe alguns outros.Querem ver?

Eu apelidei cada modelo, criei alguns em cima de outros então são todos meus com créditos somente á: (www).Para usá-los procure por: ]]></b:skin> e cole acima o código desejado.

Space (Igual ao do blog)
.post img{
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0);
filter: none; 
filter: grayscale(0);
.post a:hover img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(9%); 
-moz-filter: grayscale(8%);
filter: url(desaturate.svg#greyscale);
filter: gray; 
filter: grayscale(8%);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
filter:alpha(opacity=80); 
-moz-opacity:0.76; 
opacity:0.85;}

One black and white (porque em inglês fica mais chiquê)

.post img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray; 
filter: grayscale(100%);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
.post img:hover{
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0);
filter: none; 
filter: grayscale(0);
}
Parece ser sépia, mas fica em preto e branco, isso é culpa do Blogger.

Two black and white (invertii)
.post img{
.post img:hover{
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0);
filter: none; 
filter: grayscale(0);
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray; 
filter: grayscale(100%);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}



ZOOMBIE (apelidinho carinhoso)

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


Duas bordas arredondadas (criatividade?)
.main img {
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 0px 0px; */ Bordas arredondadas hover */
-webkit-transition-duration: .70s; */ Efeito fade */
}
.main img:hover {
-moz-border-radius: 05px;
-webkit-border-radius: 0px 50px 0px 50px; */ Bordas arredondadas */
-webkit-transition-duration: .70s; */ Efeito fade */
}

As imagens estão ruins pelos blogs desculpem, e o primeiro é das imagens normais dos posts do blog.

11 comentários:

  1. Gostei muito *u* já vi tutos de ilustrações em negativo mas nunca vi nenhum Blog usar sauhsahu

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Ashuashua também já vi muitos, mas ele é bem estranho acho que sei lá no halloween e só em uma imagem porque é bem estranho.

      Excluir
  2. Adoreeiiiiiiiiiiiiiiiiiiiiiii esse tutorial , nunca vi esses efeitos antes , aqui foi a primeira vez , quem sabe eu utilize no próximo lay >,<
    2bjs Bibs from pandarise.blogspot.com.br

    ResponderExcluir
  3. Adorei esse tutorial, awnn olha a imagem do Bieber ali :3
    aceita afiliação flor?

    http://inventyourhappiness.blogspot.com

    ResponderExcluir
  4. Adorei as dicas, olha o Bieber ali :3
    aceita afiliação?

    http://inventyourhappiness.blogspot.com

    ResponderExcluir

Por favor leia as regras antes de comentar:

- Sem spam!
- Sempre que puder deixe o link do seu blog, assim posso retribuir a visita.
- Não aceito "Segue de volta?", eu só sigo se gostar do blog.
- Vou responder como você perguntar, se insultar eu vou retribuir.
- Aceito críticas construtivas, opiniões desnecessárias serão recebidas como devem.
Leu tudinho?Então deixe seu comentário =]