Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

BORDAS DE IMAGEM COM CSS

Postado em: 28 de maio de 2007 por Pedro Rogério

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

• Distintos bordes de imagen con CSS
• Dotted Image Border

Se tiver um tempo, leiam também:

• VAGA PARA FLASH DESIGNER
• WEB DEVELOPER TOOLBAR E A ACESSIBILIDADE
• O QUE É ESSA TAL DE WEB 2.0?
• ADD-ONS PARA IE7
• Internet Explorer e a propriedade Clip

• Data 28 de maio de 2007 ás 06:14
• Nas categorias: Cotidiano
• Você pode receber notificações de novos comentários assinando o feed RSS 2.0 desse post.
• Deixe seu comentário , ou retruque via trackback do seu site.

4 comentários para esse post

1. Micox disse: 28.05.07 ás 10:28

   #1

   Umm, técnica muito interessante mesmo.

2. Marcos Reis disse: 28.05.07 ás 14:38

   #2

   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.

3. Pedro Rogério disse: 28.05.07 ás 21:56

   #3

   @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

4. Excelente!! disse: 24.01.08 ás 14:05

   #4

   Muito obrigada pelo artigo!! excelente!!

Deixe seu comentário