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
Eu adoro usar essa borda nos layouts que eu faço! Acho lindo.
ResponderExcluirBeijos
http://crazy-html.blogspot.com.br/
Perfeitas as bases, eu amo as que você faz fica linda nos lay
ResponderExcluirPosso fazer afiliação??
Amantes de Moda |
*-* Belo tuto, gostei.
ResponderExcluirHey, 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
Olá amei muito seu blog ele é muito fofo!
ResponderExcluirJá 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/
ain eu amo esse efeito! ♥
ResponderExcluirMuito bom o tuto, super útil
ResponderExcluirEstá 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
Muito Perfect e fácil demais.
ResponderExcluirAlem 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.
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é ?
ResponderExcluirBeijos,
Adolescentes do oposto (blog no perfil)