Bordas com imagens em CSS 3.

Bordas com imagens em CSS 3.

Vamos falar rapidamente sobre um dos novos atributos das CSS 3, que serve para personalizar as bordas dos elementos HTML com imagens. Publicamos este artigo dentro do Manual de CSS 3, que é uma espécie de compêndio de exemplos e técnicas que nos permitirá aplicar esta nova especificação das Folhas de Estilo em Cascata.

De maneira resumida, border-image é um atributo que nos ajudará a aplicar novos estilos às caixas com CSS, através da utilização de imagens nas bordas dos elementos, inclusive podendo escolher várias imagens para várias das partes das bordas.

Colocar imagens nas bordas é uma tarefa que já se costuma realizar no webdesign, e para isso, costuma-se utilizar complementarmente técnicas com as linguagens HTML e CSS. Ou seja, no momento de escrever este artigo, para que um elemento da página, como pode ser uma divisão ou uma tabela, parágrafo, etc., tenha uma borda a partir de uma imagem, se necessita colocar algum código HTML adicional, com algum container que nos permita logo definir estilos CSS para "imitar" essa borda de imagem. De qualquer forma, estejamos ou não familiarizados com as técnicas de uso de imagens nas bordas, o importante é que com CSS 3 vamos poder fazer isso mesmo simplesmente escrevendo alguns novos atributos aos elementos que desejarmos.

Distintas especificações sobre border-image

As especificações de CSS 3 estão em etapa de desenvolvimento. O organismo W3C, que se encarrega de definir os padrões de Folhas de Estilo em Cascata, alterou algumas vezes as especificações do atributo border-image e relacionados. É por isso, que ainda há algumas diferenças entre o que os navegadores entendem com este atributo e o que recomenda o W3C. Isto quer dizer que no futuro ainda pode mudar o funcionamento deste atributo nos distintos navegadores, tal como anuncia Mozilla em seu centro de desenvolvimento.

Exemplo de border-image

Sendo assim, para que sirva unicamente a modo de demonstração que é tudo o que se pode fazer até o momento neste artigo de CriarWeb.com, vamos dar um simples exemplo sobre o que permite atualmente os navegadores Safari e Firefox sobre border-image.Por exemplo, teríamos este elemento HTML:
<div id="camadaborda">
Vou colocar uma borda acima
</div>
E agora poderíamos aplicar estilos para criar uma borda na imagem:
#camadaborda{
-moz-border-image: url(sello.png) 2 2 2 2 stretch stretch;
-webkit-border-image: url(sello.png) 2 2 2 2 stretch stretch;
padding:20px;
width: 100px;
}
Como se pode ver, os atributos para bordas de imagens não têm o nome definitivo, que será border-image, e sim uns próprios para cada um dos navegadores que implementam esta nova característica de CSS 3. O atributo -moz-border-image é para o navegador Firefox e outros produtos da companhia Mozilla e o atributo -webkit-border-image é para qualquer navegador baseado em WebKit, como Safari ou Chrome.
A imagem que estamos utilizando como borda é a seguinte:

E o exemplo se pode ver em andamento em uma página à parte, porém lembre-se que dependendo do seu navegador poderá ver ou não a borda da imagem.

Outros atributos para fazer borda com imagens

À parte do atributo border-image, existem outros numerosos atributos para definir as bordas de maneira independente para cada um dos lados ou vértices de um elemento HTML. Talvez convém esperar um pouco antes de dar umas explicações concisas e exemplos sobre este e outros atributos, visto que mudaram bastante ultimamente.Entretanto, segundo a última especificação de CSS 3, temos os seguintes atributos:
border-image-source: Para indicar a URL da imagem que vamos utilizar como borde.
border-image-slice: Indica o espaço da imagem que será visível como borda, nos quatro lados do elemento, ou seja, top, right, bottom e left.
border-image-width: Para indicar a largura da borda.
border-image-outset: Serve para indicar a área na que a imagem de borda se estende mais da área do elemento, nos 4 lados da mesma.
border-image-repeat: Permite marcar se se deseja ou não que se repita a imagem da borda fazendo um mosaico ou se se deseja que se estique, etc.
border-image: Utiliza-se como uma maneira resumida de especificar vários atributos de borda com imagens ao mesmo tempo.
Explicar com exemplos cada um destes atributos seria sem dúvida interessante, porém nos levaria vários artigos e ademais, vale a pena fazê-lo quando já estejam disponíveis como especificação definitiva de CSS 3 e não em um simples rascunho, assim como quando estejam implementados nos navegadores.