CSS e imagens. Efeitos úteis parte 1, bordas.

É possível usar CSS para estilizar imagens de muitas formas diferentes, recorrendo à diversas propriedades e combinando-as para conseguir efeitos bem interessantes. Pretendo postar aqui algumas sugestões de como aplicar essas propriedades para obter efeitos bacanas e acima de tudo úteis.

Pra começar, uma das mais básicas: borda

Não vou colocar aqui simplesmente como aplicar bordas em imagens, isso todo mundo já sabe. O que pouca gente sabe é que também é possível aplicar padding e background em imagens via CSS. A princípio, pode parecer estranho aplicar fundo em imagens, mas isso pode ser usado de maneira bastante versátil, veja os exemplos abaixo:

Como funciona?

Simples: nestes exemplos as bordas em si são apenas a última parte do ‘contorno’ das imagens, são os traços mais finos (sólido na primeira e tracejado na segunda). O que vemos no espaço entre as bordas e as imagens é o background e o tamanho deste espaço é determinado pelo valor do padding. Veja o esquema:

Como disse, nada demais. Agora o código CSS:
.efeito1 { border:1px solid #ccc; background:#fff; padding:12px; }
.efeito2 { border:4px dashed #97915f; background:#e1dc69; padding:10px; }
.efeito3 { border:1px dotted #d5d5cb; background:url(bg_stripes.png); padding:12px; }
.efeito4 { border:1px solid #d5d5cb; background:url(bg_pattern.gif); padding:12px; }
Dessa forma podemos combinar todas as variações de borda (cores, sólida, tracejada, pontilhada, etc) com o background, no qual podemos usar cores, como nos dois primeiros exemplos, ou imagens, como nos dois últimos.

Faça o download dos arquivos.

Estas são amostras simples do que é possível fazer, lembre-se que usamos apenas 3 propriedades. Podemos combiná-las com muitas outras para alcançar resultados ainda melhores, no próximo post trarei mais idéias.