16/01/2014

[Tutorial] Efeitos nas imagens do blog

Vamos começar a brincadeirinha, já postei em mais de vinte blogs e eu continuo sem saber como começar uma postagem, esta é a triste realidade minha para o mundo -nossa que dramático- hoje me deu vontade de comer brigadeiro colorido -pra quem não sabe esse é um nome pra brigadeiro confeitado com aquelas coisinhas coloridas-. Ah é! Os efeitos serão bem simples, mas coloquei vários deles, aproveitem porque hoje o post é descente porque minha mãe liberou uma hora pra mim! Comemorem! Então vamos lá? Clique em leia mais.

Todos os códigos são usados acima de ]]></b:skin>

Sombra: (www)

img {box-shadow: inset 0 0 0 #eee, 3px 3px 5px #444}

Bordinha (www)
img {Border: 3px groove #COR;}

Opacidade: (www)
img {opacity: 1;
-webkit-transition-duration: .99s;}
img:hover {opacity: 0.8;
-webkit-transition-duration: .99s;}

Sépia discreto (www)
img {-webkit-filter: sepia(3%);
-webkit-transition-duration: .99s;}
img:hover {-webkit-filter: sepia(70%);
-webkit-transition-duration: .99s;}

Descolorir (www)
img{-webkit-transition: -webkit-filter 1s;}
img:hover{-webkit-filter: grayscale(50%); /*mude pra 100 se você quiser a imagem cinza*/
-webkit-transition-duration: .99s;}

Saturação (www)
.img{-webkit-filter: saturate(1);
-webkit-transition-duration: 1s;}
img:hover {-webkit-filter: saturate(2.5);
-webkit-transition-duration: 1s;}

Contraste (www)
img { -webkit-filter: contrast(.5);
-webkit-transition-duration: .99s;}
img:hover { -webkit-filter: contrast(1.5);
-webkit-transition-duration: .99s;}

Inverter (www)
img { -webkit-filter: invert(1%);
-webkit-transition-duration: .99s;}
img:hover { -webkit-filter: invert(80%);
-webkit-transition-duration: .99s;}

Escurecer (www)
img { -webkit-filter: brightness(1);
-webkit-transition-duration: .99s;}
img:hover { -webkit-filter: brightness(0.9);
-webkit-transition-duration: .99s;}

Matriz (www)
img {-webkit-filter: hue-rotate(0deg);
-webkit-transition-duration: 2s;}
img:hover {-webkit-filter: hue-rotate(180deg); }
-webkit-transition-duration: 2s;}
Juntei alguns efeitos que conhecia em um único post! Espero que tenham gostado!

2 comentários:

  1. Hary, gayrida! Acho q você é eu do universo paralelo no universo original -qq eu nunca sei como começar minhas postagens (nem sei o que postar).
    Eu amo esses efeitos para as imagens, gosto de usar os valores desses códigos invertidos, para ficar numa cor única. Fica muito bom fazer isso no efeito sépia! (ohhhh esse efeito é divino!)

    ResponderExcluir
    Respostas
    1. Universo paralelo no universo original? WTF? -q
      Eu também gosto de inverter os valores do sépia, eu amo aquele azulzinho que fica *----------*

      Excluir

Vai comentar? Leia as regrinhas:

~ Pode abusar dos palavrões o quanto quiserem, mas ofensas serão excluídas. Caso queiram criticar, críticas construtivas por favor;
~ "Seguindo, segue de volta?" Sim, mas fale um pouco do post também;
~ Pedidos? Fiquem a vontade;
~ Lemos a todos os comentários e sempre os respondemos;
~ No fim do comentário deixe o link de seu blog, se gostarmos, seguimos com prazer .

Pode comentar agora!