3 de nov. de 2013

Efeito "Candy"

Ainda não respondi os comentários do post passado, tenham calma que vou fazer isso logo. Como eu disse, meu PC está sem espaço, e eu vou precisar fazer uma limpa nele, quero baixar alguns animes e não vai caber no HD. Enquanto isso talvez eu fique um pouco sumida, além da limpa no PC, vou tentar ir à aula pelo menos metade da semana, estou com medo de repetir por frequência, e faz quase um mês que não vou a aula de química. Estou com saudades de aprender a nomenclatura de algum composto que nunca vou saber o que é de verdade. Sabem uma coisa chata? Odeio quando estou escrevendo e a última palavra fica na linha de baixo -.-

Faz tempo eu eu não posto aqui um efeito para imagens. Ultimamente todo mundo anda usando o mesmo efeito (até eu!) e eu achei legal postar um efeito simples, mas que ao mesmo tempo fosse bonito. O nome do efeito é "candy" e fui eu mesma que bolei ele. O efeito pode ser usado em elites de afiliados, e fica mais bonito em blogs que tem duas cores no layout. Quem tiver layout azul e rosa vai dar sorte, porque fiz o efeito com essas cores mesmo. Quem tiver um layout de outra cor terá que editar os códigos. Vamos logo ao efeito:


1- No HTML do seu blog, cole o seguinte código:
.chocolate {
transition:All 1s ease-in;
-webkit-transition:All 1s ease-in;
-moz-transition:All 1s ease-in;
-o-transition:All 1s ease-in;
transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
padding:5px;
}
.chocolate:hover{
transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
padding:5px;
}

2- Para usar:

<a href="LINK DO BLOG"><img border="0" class="chocolate" src="LINK DA IMAGEM" /></a>

Explicando
transition:All 1s ease-in;
-webkit-transition:All 1s ease-in;
-moz-transition:All 1s ease-in;
-o-transition:All 1s ease-in;
Se refere a transição, que seria o tempo que o efeito demora a acontecer. 

transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
Transformação da imagem. Recomendo não alterar nada.

background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
Edite esta linha, que corresponde ao fundo das imagens (borda em degradê). O primeiro código é a cor da parte de cima da borda (primeira cor do degradê) e o segundo da cor parte debaixo da borda (segunda cor do degradê).

padding:5px;
Tamanho da borda.

Os códigos com ":hover" são os mesmos que o de cima, a única diferença é que eles se referem apenas quando passa o mouse.

Espero que gostem do efeito.
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

20 comentários:

  1. Que efeito diivo, acho que irei usar no próximo lay!

    htmlandresources.blogspot.com

    ResponderExcluir
  2. Que perfeito *w*,vou usar no meu próximo lay =3

    ResponderExcluir
  3. Que efeito lindo *0*

    www.princedreamer.com

    ResponderExcluir
  4. Lindo mesmo =D
    Muito bom!

    Segue aí? Por favooor *o*
    http://words-of-ricci.blogspot.pt/

    ResponderExcluir
  5. Adorei o efeito! Muuuito fofo ;3

    Letícia Evans | Vida de uma SONE

    ResponderExcluir
  6. Adorei o efeito ^-^ Parabéns! hihi
    Felizmente só tenho mais dois dias de aula, mas quando não tinha prova eu também faltava bastante.
    Nyaa, amo química orgânica *o*'

    ResponderExcluir
    Respostas
    1. Nossa que sorte a sua, eu tenho mais um mês mais ou menos, chato pra caramba!

      Excluir
  7. Que efeito perfeito! #Rima *OO* Amei as cores das bordas, perfeitos mesmo, x3x
    Ah, eu fiquei em dúvida, você não estava criando outro blog? Vai querer se afiliar com esse ou com outro? Me avise depois, pra eu te colocar :3

    ResponderExcluir
  8. Na minha escola tbm repete por frequência.
    eu adorei essa bordinha, adorei ♥. Vou usar, com certeza!

    ResponderExcluir
    Respostas
    1. Na minha eu nem sei se repete mesmo (nunca ninguém repetiu por isso), mas eu que não vou arriscar colocar a escola a prova! ushaushua'

      Obrigada!

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!