#DicaParaBlogs: Inserir borda pontilhada em fotos
Oi amores e amoras!!!
Tava revirando umas pastas dos meus blogs antigos no HD e achei um arquivo bloco de notas cheio de códigos úteis para blogs. Claroooooooooooo que nem pensei duas vezes antes de vim compartilhar tudo com vocês.
Pra começar, que tal aprender colocar essa bordinha pontilhada - super fofa - nas suas fotos???*-*.
O tutorial é muito simples e permite não apenas adicionar a borda, como alterar a cor e tamanho do traçado, além de alterar o tamanho da foto.Bora aprender???
1° Copie o código:
2° Insira a url da sua imagem no espaço indicado e personalize o código conforme desejar.
Comandos personalizáveis:
height: altura da imagem, nos dois exemplos está sendo usado "350".
width: largura da imagem, nos dois exemplos está sendo usado "300".
DICA EXTRA: Antes de alterar a imagem, visualize num programa de edição de imagens a proporção certinha para não esticar ou achatar a sua imagem. Caso a sua imagem já tenha sido salva com o tamanho desejado, você pode excluir esses dois comandos:
height="350"
width="300"
Só tenha cuidado pra não excluir nada além disso!!!
border: Largura da borda. Mais fina 4px (primeiro exemplo), mais grossa 10x (segundo exemplo).
rgb: a cor da borda. No primeiro exemplo rosinha (255, 85, 127) e a roxa, do segundo exemplo (139, 0, 139).
Abaixo disponibilizo uma tabela de cores pra você substituir as três combinações de números e alterar para cor que desejar. Ex. verde (0, 255, 0), coral (255, 114, 86), e por ai vai...
3° Cole no HTML do seu post, no local que deseja que a imagem apareça e pronto!!!
Testou no seu blog? Deu certo???
Se sim, deixa o link do seu blog aqui nos comentários para que eu possa ver ou sugere novos tutoriais.
Tava revirando umas pastas dos meus blogs antigos no HD e achei um arquivo bloco de notas cheio de códigos úteis para blogs. Claroooooooooooo que nem pensei duas vezes antes de vim compartilhar tudo com vocês.
Pra começar, que tal aprender colocar essa bordinha pontilhada - super fofa - nas suas fotos???*-*.
O tutorial é muito simples e permite não apenas adicionar a borda, como alterar a cor e tamanho do traçado, além de alterar o tamanho da foto.Bora aprender???
1° Copie o código:
2° Insira a url da sua imagem no espaço indicado e personalize o código conforme desejar.
Comandos personalizáveis:
height: altura da imagem, nos dois exemplos está sendo usado "350".
width: largura da imagem, nos dois exemplos está sendo usado "300".
DICA EXTRA: Antes de alterar a imagem, visualize num programa de edição de imagens a proporção certinha para não esticar ou achatar a sua imagem. Caso a sua imagem já tenha sido salva com o tamanho desejado, você pode excluir esses dois comandos:
height="350"
width="300"
Só tenha cuidado pra não excluir nada além disso!!!
border: Largura da borda. Mais fina 4px (primeiro exemplo), mais grossa 10x (segundo exemplo).
rgb: a cor da borda. No primeiro exemplo rosinha (255, 85, 127) e a roxa, do segundo exemplo (139, 0, 139).
Abaixo disponibilizo uma tabela de cores pra você substituir as três combinações de números e alterar para cor que desejar. Ex. verde (0, 255, 0), coral (255, 114, 86), e por ai vai...
Clique na imagem para visualizar maior
Testou no seu blog? Deu certo???
Se sim, deixa o link do seu blog aqui nos comentários para que eu possa ver ou sugere novos tutoriais.
Instagram | Fanpage | YouTube | Sua Opinião
HTML salvando os blogueiros desde sempre rsrs. adoro essas dicas simples e que ajuda bastante pra da uma cara nova aos posts do blog. :D
ResponderExcluirAbraços, Edwin.
www.oquefaltou.com|Facebook|Twitter|Instagram