Como fazer um efeito


Olá pessoal
Meu Deus, acho que vou morrer de estresse. Primeiro, estou estudando e trabalhando que nem uma louca, retribuindo muitos comentários, saindo com minha mãe, fazendo trabalhos para os outros, instalando programas e etc. Sério, to morrendo! Eu nem queria postar hoje, mas preciso, porque nem sei se o blog vai ter postagens semana que vem, pois tenho provas em cima de provas! Mas tudo bem, hoje consegui um tempinho livre e vou deixar pelo menos duas postagens programadas, pois assim só retribuo os comentários! Queria aproveitar para agradecer pelos 326 seguidores. Tipo, estamos crescendo em um ritmo perfeito e maravilhoso! E isso me deixa muito realizada. E...MDS, esqueci o sorteio de domínio por causa das provas :/. Me desculpem de montão, prometo que quando acabar as provas eu faço. Minha vida está uma correria!Ah, alguém viu o trailer do GTA V? PQP morri. Aquele jogo é perfeito, divo e maravilhoso ♥. Como não tenho PS3 ou Xbox, vou esperar lançarem o de PC para eu baixar, ou pegar com um amigo nerd meu. Adeus vida social....

Ok ok, hoje vou ensinar um pedido feito por um anônimo de como criar um efeito para afiliados. Não entendi muito bem a pergunta, por isso vou ensinar como criar um efeito normal mesmo, e ensinar alguns tópicos...
Let's Go...



Vou usar como exemplo o efeito que está na no gadget do blog destaque, ele é bem simplesinho, mas acho ele lindo ♥ Com o tempo, você vai saber o que cada código significa, basta apenas fuçar nos códigos, que pode sair algo bonito.

Como todos devem saber, os estilos são aplicados abaixo de <b:skin> ou acima de ]]<b:skin>. Portando escolha um desses dois lugares e cole esse código:

.bordinha {
padding:4px;
border:1px solid #eee;
opacity: .90;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
-moz-box-shadow:    1px 0px 5px rgba(70, 58, 75, 0.3);
box-shadow:         1px 0px 5px rgba(70, 58, 75, 0.3);
}
.bordinha:hover {
padding:4px;
border:1px solid #eee;
opacity: .50;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}

Entendendo: 

padding:4px; - é o espaçamento entre a imagem e a sua borda
border:1px solid #eee; - respectivamente, são grossura da borda, o tipo de bordas (solid, dashed, dotted, double, etc) e a sua cor
opacity: .90; - transparência
-webkit-transition:all 1s ease; - é o efeito de transição
-moz-transition:all 1s ease; - tempo de transição
-o-transition:all 1s ease; tempo de transição
-moz-box-shadow: 1px 0px 5px rgba(70, 58, 75, 0.3); - sombra interna e externa/ pega no firefox
box-shadow: 1px 0px 5px rgba(70, 58, 75, 0.3); sombra interna e externa

Agora adicione um gadget de HTML e cole:

<br /> <a href="LINK" title="NOME"><img src="URL DA IMAGEM" width="LARGURA" height="ALTURA" class="bordinha" /></a>

Gente, se tiver algo errado me corrijam, pois estou apressada para ir estudar para a prova!
Adicione quantos quiser e divirta-se fazendo seu efeito u3u
Kiss ~


21 comentários:

  1. Parabéns pelos seguidores! E poxa, sei como está sendo, literalmente... Porque a minha rotina ultimamente está sendo uma loucura, já que é fim de trimestre na escola e estou correndo pra tirar notas boas nas provas.
    Adorei o tuto ;3

    Beijos da Lets | Vida de uma SONE

    ResponderExcluir
  2. GTA V deve estar muito perfect, quero jogaar!
    Adorei o tuto.
    sorvete-de-limao.blogspot.com

    ResponderExcluir
  3. Adorei o tutorial, vou tentar fazer um efeito *u*
    Bjs
    CAT GIRL

    ResponderExcluir
  4. Parece facil ahah Legal.
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen - 2 anos hoje *oo*
    Meu Instagram / Me segue?!

    ResponderExcluir
  5. Já havia visto este tuto >.<" Mas mesmo assim obrigada *u* Apesar de eu o considerar difícil, não custa tentar u-u

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  6. Noussa muié o.o, tu precisa de um tempo pra ficar calma, tais doidona visse u_u, confesso que nunca consegui fazer um efeito, vou salvar esse post nos favoritos e.e

    Hey, A4Y

    ResponderExcluir
  7. Que ótimo,agora eu posso criar efeitos <333
    Um beijo
    http://bombasticmusics.blogspot.com

    ResponderExcluir
  8. Adorei o tuto, ajuda quem não sabe, kisses

    Candy | Collected flowers

    ResponderExcluir
  9. Nem sabia que a Rockstar vai lançar para PC. Vou ganhar o jogo ~lalalá~ e acho que vai valer á pena. O Trailer já saiu á tanto tempo acho que já tem até Gameplay por ai. Faça logo esse sorteio, quero participar!
    Legal esse tutorial para iniciantes, eu faço por outro método, mas esse é mais fácil!

    Ammy, Fairy Floss | Voltamos

    ResponderExcluir
  10. Nosenhola,calma Mandi-chan ç-ç.Vai ocorrer bem,nyaah *u*
    AAAHHH GTA V,tô doida pra os pirateixons lançarem pra pc ~huehuehe.Como eu não consegui atualizar meu x-box pra jogar,ai vai no pc mermo xD
    Não manjo nos html,mas deu pra entender muita coisa *u*.
    Bjuus Mandi-chan >33< Otakada Kawaii

    ResponderExcluir
  11. Awn Mandi, também estava nesse ritmo mega agitado, não estava conseguindo dar conta de tudo e estava morrendo de estresse, o que eu fiz foi dar uma largada em algumas coisas pra tentar conciliar tudo sem me prejudicar... Mas é realmente difícil. Enfim... Ótimo tutorial. As vezes eu não entendo muito bem os pedidos das pessoas kkkk, que nem você disse ali, mas esse efeito que você ensinou fica demais. Beeeeijos! *-*

    Rediscovering Dreams

    ResponderExcluir
  12. PEGAR COM AMIGOS NERDS O GTA não tem preço o//
    super bacana esse tuto, eu adorei ele e super bem explicado *-*
    AAH somos 2 que estão estressados graças a pressão escola Ç-ç

    XOXO :D
    Joven Clube | Official

    ResponderExcluir
  13. Amei a dica, eu estava tentando descobrir como fazer e agora você me ajudou muito u.u
    beijos

    chocoonut.blogspot.com.br

    ResponderExcluir
  14. Oiii conheci seu blog ele é muito mais muito lindo,já to seguindo se poder segue meu blog de volta ! Amei o tutorial bem bacana ..

    Beijos !

    http://nightsofwinteroficial.blogspot.com.br/

    ResponderExcluir
  15. Parabéns pelos seguidores, amei o tuto, vou tentar seguir ele pra ver se consigo fazer meu primeiro efeito, não tenho paciência nem de tentar .

    h-worlds.blogspot.com

    ResponderExcluir
  16. Mulér:

    -moz-box-shadow: 1px 0px 5px rgba(70, 58, 75, 0.3); - sombra interna
    box-shadow: 1px 0px 5px rgba(70, 58, 75, 0.3); sombra externa

    Não é sombra interna ali, é externa também, só que o "-moz" é pra pegar no firefox >3<

    ResponderExcluir
    Respostas
    1. Valeu, é que eu tava com pressa, já vou consertar >3<

      Excluir
  17. super me Ajudou ahahahaha Obg *-*

    Olha o efeito que fiz com sua explicação

    http://princesa-descolada-myla.blogspot.com.br/2013/10/efeito-borda-em-imagem.html

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ