29 de out de 2012

Tutorial: Bordas em hover na imagem


Oii minhas garotinhas, tudo bem? Quanto tempo não é? Hoje eu vim ensinar um tutorial super prático que é como colocar bordas nas suas imagens, e quem sabe até em hover! É de um nível médio, tem que ter paciência e saber usar HTML. Vamos lá? 
Dessa vez, agora tenho outra novidade: fiz um blog de live preview's, para vocês conferirem a partir de hoje, como fica cada tutorial no seu blog ;]


Primeiro você:
Vai no seu HTML > Dê um Ctrl+F ou F3 e procure por:

]]></b:skin>

Depois, acima dessa tag você cola:

..post img{
-webkit-transition-duration: .3600s;
border:3px solid  #CD9EDC; 
}
.post img:hover {
border:3px solid #DDA0DD;
moz-opacity:.80;
opacity:.80 ;
}


Super simples não é? Agora vamos transformar, o código normal:

border:3px solid #CD9EDC;
Em 1px você troca o "1" pelo número que quiser, e é a espessura da borda.
Em solid, você coloca o estilo da borda. Eu indico "solid" ou "ridge".
E por último, em #CD9EDC você coloca a cor que quiser.


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

É para arredondar sua imagem. Você pode adicionar ou não, e para arredondar mais, é só aumentar o número(só troque o 10 por um número maior) e diminuir(só troque o 10 por um número menor).

-webkit-transition-duration: .3600s;

É a duração do hover, se quiser lento. Se quiser rapidinho, pode apagar. O número 3600 é ótimo, mas pode trocar.
--------------------------------------------------------------------------------------
Agora o código em hover da sua imagem.

border:3px solid #DDA0DD;

Em 1px você troca o "1" pelo número que quiser, e é a espessura da borda no hover, ou seja quando passa o mouse.
Em solid, você coloca o estilo da borda no hover. 
E em #DDA0DD você coloca a cor que quiser pro seu hover.

moz-opacity:.80;
opacity:.80 ;
É se você quiser opacidade no hover. Se não quiser, pode tirar esse código. Mas se quiser, mantenha. O 80 é perfeito, mas se você quiser aumentar ou diminuir.
--------------------------------------------------------------------------------------

Muito difícil? Se você conseguir interpretar é fácil, eu ensinei e dei meu melhor. Mas a qualquer dúvida, estou a disposição certinho?

Vocês podem mudar qualquer coisa, adicionar, eu acho divino esse tutorial, as imagens ficam maravilhosas.

Tem mais uma surpresinha, mais uma novidade: o próximo lay, que é o da Aninha, eu não sei se ela ta fazendo, mas o meu, depois do dela, está prontíssimo e lindo, me superei. Acho que vocês vão amar <3

Beijos e mais beijos :3


Awwwwwwwwwwwn, inri x---x

9 comentários:

  1. Eu adoro usar essa borda nos layouts que eu faço! Acho lindo.
    Beijos
    http://crazy-html.blogspot.com.br/

    ResponderExcluir
  2. Perfeitas as bases, eu amo as que você faz fica linda nos lay
    Posso fazer afiliação??

    Amantes de Moda |

    ResponderExcluir
  3. Heeeeeeeeey, olha aqui o que eu fiz para você!

    CandyPictures.tk

    ResponderExcluir
  4. *-* Belo tuto, gostei.

    Hey, poderia me passar o link do tuto do primeiro menu, o de "destaques". E se ainda não postou, postar, pleease?

    THanks ;* / Heart Cake / perfil

    ResponderExcluir
  5. Olá amei muito seu blog ele é muito fofo!
    Já estou seguindo segue de novov?.Eu gostaria de me tornar afiliada,eu também te coloco nos afiliados (♥)
    Kissus -nnnnnnnn
    http://animesdreamsoficial.blogspot.com.br/

    ResponderExcluir
  6. Muito bom o tuto, super útil


    Está rolando um concurso lá no Meu Cupcake Pink, valendo um layout e divulgação, participa!?

    http://meucupcakepink.blogspot.com/2012/11/1-ano-de-meu-cupcake-pink.html

    ResponderExcluir
  7. Muito Perfect e fácil demais.
    Alem do mais, depois dessa explicação fica dificil não entender.

    Ahh, olá, sou Byel Af o dono do Sou o Byel.
    Achei seu blog pelo de uma amiga e gostei muito.
    Já estou seguindo.

    Bye bye.

    ResponderExcluir
  8. O layout vai ficar lindo quer ver ? O tutorial não é dificil é trabalhoso, isso que eu acho. Legal esse efeito, fica lindo e não da o trabalho de botar borda por borda nas imagens do post né ?
    Beijos,
    Adolescentes do oposto (blog no perfil)

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada