Bordas de imagem com CSS
Postado por: Pedro Rogério em
Com CSS é possível praticamente fazer tudo aquilo que você deseja, até mesmo colocar bordas de imagem em elementos que você deseja, como vocês podem ver nessa screenshot acima, e mediante a propriedade “padding” você define a espessura da borda de imagem. É bem simples, peguem esse CSS como exemplo:
img {
padding:6px;
background:url(dotted.gif) repeat;
}
Está pronto, em background você pode utilizar a imagem que desejar, basta ter criatividade. Caso você queira utilizar a imagem da borda desse tutorial, pode baixá-la aqui. Um exemplo desse tutorial você pode ver aqui.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Umm, técnica muito interessante mesmo.
Pedro você é didático em suas explicações e tenho certeza que pode ajudar que eu entenda definitivamente a diferença entre CSS,HTML e XHTML.Você tem algum texto tratando dessa diferença?
Um abraço.
@Marcos,
Dê uma olhada nesses textos que você vai entender bem:
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
http://pt.wikipedia.org/wiki/HTML
http://pt.wikipedia.org/wiki/XHTML
Muito obrigada pelo artigo!! excelente!!
muito bom esse exemplo parabens…
Oi Pedro,
como seria para colocar este tipo de borda
em partes do corpo do blog (outer-wrapper,
main, sidebar….), uso o template minima
do blogspot.