Tutorial - Efeito 'Pá'


Oin gente <33

Então, sinto em lhes informarem, mas o Natsu nos traiu do mesmo jeito que a lua traiu a Joelma IUSHAIUSA' Mentira, mas também não tenho notícia de vida dele o3o Então vou tentar atualizar o blog mesmo assim com os meus lindos (só que não) materiais e tutoriais >3< Eu adoro tutoriais e utilitários, isso me traz inspiração para posts comuns u-u Quanto mais eu posto isso, mais eu tenho ideias quase brilhantes para os meus posts no LD, isso quando eu estou em um dia bom q

Bem, voltando ao assunto do post, eu fiz um efeito fedorento chamado 'Pá'. Ele não parece uma pá que recolhe alguma coisa, mas sim porque eu fico falando PÁ quando ele abre. Nem ficou tão bom, é a primeira vez que eu uso Keyframes, e pretendo descobrir mais efeitos, mas creio que ficou usável o3o A Natália e a Bia Riccio disseram que ficou bonito <33 Preview aqui: ☁☀☁

Coloque o código abaixo, acima de ]]></b:skin>
@keyframes arroz { 0% {border: 2px solid #dec2e3;
}
 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }@-webkit-keyframes arroz {0% {border: 2px solid #dec2e3;} 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }@-moz-keyframes arroz { 0% {border: 2px solid #dec2e3;} 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }@-o-keyframes arroz { 0% {border: 2px solid #dec2e3;} 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }.image {-webkit-transition-duration: .90s;border-radius: 4px;border: 2px solid #dec2e3;}.image:hover {-webkit-transition-duration: .80s;-animation: arroz 2s alternate; -webkit-animation: arroz 2s alternate; -o-animation: arroz 2s alternate; -moz-animation: arroz 2s alternate;}

Entendendo o código: Onde tem 'border: 2px solid #ab7f9f' e 'border: 2px solid #dec2e3;' é a cor da borda. Mude se não quiser ela lilás o3o Não mude nada no resto q

Para adicionar no blog o efeito coloque no Html/JavaScript
<center>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
</center>
Espero que tenham gostado o3o
Nota do Natsu: Gente, eu não morri. No dia 20 (dia que esse post foi publicado, rs) eu estava numa feirinha de artesanatos, gastronomia, dança e vários produtos. Por isso não postei, e além de chegar exausto a noite ainda tive que ir a um restaurante :v. Férias que eram para o blog, estão sendo para mim. ç-ç

25 comentários:

  1. Vou nem falar nada do nome suahsuah'

    Achei o efeito fofo *o*

    ResponderExcluir
  2. Gente, que coisa linda ♥ Fiquei extremamente apaixonada pelo efeito e olha que nunca me apaixonei por um efeito antes q. Mentira, já fiquei sim, mas este é lindo! *3*

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  3. Eu amei esse efeito, tipo... muito divo *o* acho q vou usar...
    Dá uma passadinha no meu blog? e se gostar segue? Já estou seguindo seu cantinho >.<

    bjs u3u

    http://thingsteenoficial.blogspot.com.br

    ResponderExcluir
  4. Eu queria aprender a usar keyframes ;A; mas eu tento e nunca sai nada legal -q Eu gostei do efeito PÁ -q fiquei falando "pá" enquanto passava o mouse por cima -q AHSGDVKHGABD Mas eu prefiro usar efeitos mais simples :BB

    Kissu :* Bedazzled ~ Tea Party

    ResponderExcluir
    Respostas
    1. Também, se for visitar meu blog, não tem nada demais o3o Viu falar 'pá' é muito top q

      Excluir
  5. Postar tutoriais e utilitários também me dá muita inspiração :3 eu adorei o efeito "pá", é bem diferente e bonito. Fiquei dizendo "pá" quando ele abria, mas não vi muito sentido, heuheheu.

    Beijos | Pocky Tutorials

    ResponderExcluir
    Respostas
    1. Eu tenho essa mania; Naqueles que piscam eu falo: 'plin plin' o3o

      Excluir
  6. O efeito é bem legal' Mas o nome é bem engraçado ahushus' Pá
    Adorei o tutorial, onde está o Natsu u3u

    Fairy Html -

    ResponderExcluir
  7. Melhor do que o meu ehin kkkkkk Ficou lindo mesmo!

    www.whatnae.com

    ResponderExcluir
  8. O efeito ficou bem legal, só achei meio exagerado os dois movimentos de rotação juntos >3< ótimo efeito, Júlia :D
    Wendy | Checkmate (checkm-ate.blogspot.com)

    ResponderExcluir
  9. O efeito ficou super agradável e usável, eu adorei ele, agora me viciei ao falar 'páa' no hover dele AHUASHUSA' (:

    Até breve>u<~ Sky on Sire {}

    ResponderExcluir
    Respostas
    1. Iupii, minha macumba deu certo, todos estão falando pá o3o

      Excluir
  10. Que efeito perfeito, mds >u< só não uso porque to com preguiça u.u
    Kiss, Jennifer | spring-iin-london.blogspot.com.br/

    ResponderExcluir
  11. Que efeito lindinho gente <3 JULIA MINHA SALVAÇÃO, RÇRÇ. Quando for pra eu postar me avise no facebook porque você parece que é a helena q

    ResponderExcluir
    Respostas
    1. Como assim me confundindo com a Helena qq Sempre salvo tudo o3o

      Excluir
  12. Amei o tuto. irei usa-lo <3

    Aceita afiliação, se sim comente em blog :) obrigada!!

    estrelandoanoite.blogspot.com.br

    ResponderExcluir

Regras:
• Os comentários são moderados.
• Não xingue nada nem ninguém.
• Comentários como: "Seguindo, segue de volta ?" serão deletados.
• Se for fazer uma crítica faça com educação e bom senso.
• Pedidos feitos por comentário não serão realizados, pedidos só na ask.
• Obrigado por comentar!