11 fevereiro 2013

Efeito Vai e Volta | PSDs

| |

Oi gente ^-^
Eu resolvi postar um efeito que eu fiz a algum tempo enquanto eu estava brincando com códigos. Na minha opinião, ficou bem legal.

{Ah, um leitor pediu para ensinar a criar efeitos com HTML, como os meus. Eu vou preparar um tutorial que seja simples e fácil. Eu estou devendo um post sobre como fazer as ilustrações de posts. Depois que eu postar, vou fazer o tutorial de como fazer esses efeitos.}

Eu também vim postar dois PSDs {efeitos para PhotoShop} que eu mesma fiz. Eles não ficaram como eu queria, mas me agradaram. Se parar para pensar, ficaram bons para meus primeiros PSDs.
Para conferir, é só clicar em Leia Mais ;P


Efeito Vai e Volta
No HTML do blog, procure por ]]>< e quando achar, cole acima:

@-webkit-keyframes efeito-tqvv-isa {
0% {-webkit-transform: skew(15px);}
50% {-webkit-transform: skew(-25px);}
100% {-webkit-transform: skew(20px);}
100% {-webkit-transform: skew(-15deg);}
}
@-moz-keyframes efeito-tqvv-isa {
0% {-moz-transform: skew(15px);}
50% {-moz-transform: skew(-25px);}
100% {-moz-transform: skew(20px);}
100% {-moz-transform: skew(-15deg);}
}
@-o-keyframes efeito-tqvv-isa {
0% {-o-transform: skew(15px);}
50% {-o-transform: skew(-25px);}
100% {-o-transform: skew(20px);}
100% {-o-transform: skew(-15deg);}
}
.efeito-tqvv-isa {-webkit-transition: .2s; border-radius: 5px; box-shadow: 0px 0px #caebe6; border: solid 0px #fff;}
.efeito-tqvv-isa:hover {-webkit-animation: efeito-tqvv-isa .2s alternate infinite linear; border: solid 0px #fff;}
border-radius: 5px; são bordas arredondadas
border: solid 0px #fff; é o tipo da borda | Grossura | e a cor. Está sem a borda {0px}


Para colocar, vá em Layout • HML/JavaScript • E cole:
<a href="LINK"><img class="efeito-tqvv-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-tqvv-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-tqvv-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-tqvv-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-tqvv-isa" src="URL DA IMAGEM" /></a>
Prontinho!
Agora aos PSDs ^-^

{Caso você seja novato no PhotoShop (somos dois), é só seguir esse tutorial caso não saiba usar PSDs. Serve para qualquer versão}

PSD #1




Eu amei esse psd! É simples, mas ao mesmo tempo é bonito e delicado. E serve em qualquer foto, de loiras e cabelos escuros e em pessoas morenas, como viram aí em cima.
{#Dica: Não use em fotos muito escuras, pois não vai ficar legal.}

#Download

PSD #2


Para ser sincera, não gostei muito. Mas achei que deveria postar. Deu um tom mais primavera nas fotos.
{#Dica: Não use em fotos escuras. Como viram, na foto da Alessandra (a debaixo) a foto com PSD ficou meio feiinha, pois era mais escura que a primeira, que ficou bem melhor por ser mais clara.}

#Download

Beijos ;♥
Espero que tenha gostado, amores!

11 comentários:

  1. Gostei do tuto, seu blog é muito lindo !
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  2. Adorei,seus efeitos são muito legais,eu quero usar todos,mas o blog é pequeno de mais,kkk.por favor poste mais.
    ✩Sckitty World✩

    ResponderExcluir
  3. Adorei esse efeito e os psd's também. *u*
    Já estou seguindo aqui, seu blog é divo, haha <3
    Beijos.

    ResponderExcluir
  4. Muito Bom... http://leyahff.blogspot.com.br/

    ResponderExcluir
  5. ooi isa , adorei o tuto !*
    então amore pq não vai fazer mais o meu lay ,, aa queria tanto que fosse vs que fizesse o lay , pois ameei o seu lay e aposto que iria amar o lay que vs iria fazer pra mim , até já lhe mandei o e-mail das cores e etc ,, aa abre uma exceção e faz o meu lay , vai por favor gatta ? :333

    ResponderExcluir
  6. Muito legal esse efeito, adorei os psd's! São lindos :3
    Parabéns, você acertou o game do blog e ganhou uma semana de divulgação na sidebar :D

    crazyforhtml.blogspot.com

    ResponderExcluir
  7. Adorei o efeito, fica lindo numa elite de afiliados! E eu vou querer muito ler seu tutorial, adoraria saber como faz efeitos ^^
    Eu adorei o PSD 1, baixei ele já, obrigada pelo post ^^

    Beijos
    Too Kawaii

    ResponderExcluir
  8. Gostei do efeito, e eu A-M-E-I o último PSD, ficou muito bom! Você devia fazer mais. u-u Beijos s2
    wehearthtml.blogspot.com

    ResponderExcluir
  9. Legal esse efeito! Usarei no meu próximo layout, vou até salvar nos favoritos!

    Dá uma passadinha?

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
  10. Amei o tutorial,o efeito é lindo e também gostei da fonte que está escrito:Efeito Vai e Volta rsrsrs e gostei mais do último PSD.

    Beijos
    Amora R.

    ResponderExcluir
  11. Amei o tutorial. Um beijo!

    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir

« »