15.1.14

Efeitos e webkits - para imagens


Bonjour (c'est français) :)

Título possivelmente estranho, mas foi o único que me ocorreu. Este post trás vários efeitos, mas não efeitos completos, que reúnam vários elementos em Html - consistem numa única, ou talvez duas, linhas, sendo a principal delas o filtro, e hover gradual como opcional. O que são? Bem, o hover gradual é explicado pelo próprio nome, mas dou exemplos mais abaixo. Quanto aos filtros, são eles que permitem escurecer, clarear, ou dar uma certa tonalidade à imagem. Fiz este post para reunir todos os que conheço, então é só aplicar dentro de uma chaveta com o efeito, como demonstro no fim.




~Hovers~

A imagem pode ter o efeito por si só, mas eu só gosto que sejam aplicados no hover, ou seja, ao passar o rato.

efeitosemhover {-webkit-filter: grayscale(100%);}
efeitocomhover {-webkit-filter: grayscale(0%);}
efeitocomhover:hover {-webkit-filter: grayscale(100%);}

Os hovers podem surgir repentinamente, ou gradualmente. Eu indico que surjam gradualmente, dá um ar mais delicado. Para isso, dentro das chavetas deve ser acrescentada a linha abaixo, sendo que o tempo de translação pode mudar, por exemplo, para "5s", que são 5 segundos inteiros. Também têm prévias em baixo.
-webkit-transition-duration: .60s;
Troque a primeira palavra pelo navegador correspondente:
 -webkit-
 -webkit-
 -moz-
 -ms-
 -o-

~Rotação~

Há várias maneiras de fazer uma imagem rodar, e o código funciona sempre do mesmo modo. Para inverter a direção em que roda, basta trocar o número por um negativo. Aqui vale a pena considerar os ângulos, sendo que para colocar a imagem ao contrário se deve rodar 180 graus, e para dar uma volta completa, 360.
Para rodar sobre si mesma:
-webkit-transform: rotate(360deg);
Para rodar segundo o eixo do X (na horizontal):
-webkit-transform: rotateX(360deg);
Para rodar segundo o eixo do Y (na vertical):
-webkit-transform: rotateY(360deg);

~Filtros de cor~

  • Opacidade
-webkit-filter: opacity(0.5);


  • Grayscale
-webkit-filter: grayscale(100%); 
OU
-webkit-filter: saturate(0);


  • Sépia
-webkit-filter: sepia(0.9);


  • Saturação
-webkit-filter: saturate(3);


  • Brightness
-webkit-filter: brightness(0.5);


  • Hue Rotate
-webkit-filter: hue-rotate(480deg);


  • Invert
-webkit-filter: invert(100%);


  • Contrast
-webkit-filter: contrast(4);


  • Blur
-webkit-filter: blur(3px);


~Como usar os filtros e webkits~

Abra o seu HTML e procure por
/b:skin
acrescente em cima
.NOME-DO-EFEITO {}
Irá colocar a linha com o filtro escolhido dentro das chavetas, e se quiser, a transição gradual. Troque o nome do efeito por um ao seu gosto. Agora, para usar numa imagem, abra um gadget HTML/Javscript, e escreva lá dentro:
<img src="URL-DA-IMAGEM" class="NOME-DO-EFEITO" />
Pronto, agora é só colocar a url da imagem que quer e trocar o nome do efeito por aquele que escolheu acima.

Ah, se quiser usar nas imagens de post, não é necessário aplicar em nenhum gadget e o nome do efeito deve ser:   .post img


Era isto, espero ter ajudado ;)


1 comentário:

  1. O efeito Grayscale é o mais utilizado na blogosfera, é um efeito simples e que tem um resultado bem legal.
    Ótimo tudo, você coloca tudo de uma maneira fácil de entender. Vlw.
    Abraço.

    ResponderEliminar