:: Bordas com imagem nas CSS3 ::

No dia 17 de dezembro de 2009 o Módulo Backgrounds e Borders das Recomendações para a CSS3 passou ao status de Candidato a Recomendação do W3C. Até o dia em que escrevi está matéria dos 47 (quarenta e sete) módulos previstos nas CSS3 apenas oito deles alcançaram este estágio que é o terceiro entre cinco até que seja atingido o estágio final de Recomendação do W3C. Nesta matéria comentarei as funcionalidades para definição de bordas com imagem previstas naquele Módulo.

As especificações para o Módulo Background e Borders no seu item 5 que trata deste assunto e intitula-se "Bordas com imagens" diz o seguinte:

Os autores podem criar uma imagem para ser usada como um estilo de borda. Neste caso o formato da borda será constituído com porções extraídas dos cantos e das laterais da imagem. Cada porção da imagem será devidamente recortada, aumentada, diminuida e/ou alongada de modo a preencher a área destinada a borda.

Imagem modular

Extrair porções da imagem e tratá-las devidamente implica em que se construa as imagens destinadas a bordas de forma modular para possibilitar uma consitente manipulação dos módulos pelos mecanismos internos das CSS. Observe a seguir uma típica imagem construída para ser aplicada como borda.

Imagem modular para bordas

Trata-se de uma imagem construída com nove módulos de 15x15px. Para facilitar o entendimento da maneira como o mecanismo das CSS funcionam ao manipular uma imagem para bordas vamos identificar os diferentes mólulos conforme descrito a seguir:

Cantos: são as quatro estrelas vermelhas com fundo amarelo.
Borda superior: é o quadrado amarelo com fundo vermelho na parte superior da figura.
Borda lateral direita: é o quadrado amarelo com fundo azul à direita.
Borda inferior: é o quadrado amarelo com fundo vermelho na parte inferior da figura.
Borda lateral esquerda: é o quadrado amarelo com fundo azul à esquerda.
Conteúdo: é o quadrado central transparente.

Se você deseja definir a cor de fundo do box no qual será aplicada a borda com regras CSS salve sua figura de modo a preservar a transpârencia do módulo central (GIF com tranparência alpha ou PNG transparente), pois como veremos é ali que será inserido o conteúdo do box.

Com uso de uma só figura podemos obter vários efeitos de bordas, pois como diz a especificação a imagem será "recortada, aumentada, diminuida e/ou alongada de modo a preencher a área destinada a borda."

Aqui podemos fixar um princípio básico da construção de bordas com imagens:

Imagens destinadas a servir como bordas de elementos HTML devem ser contruídas em forma de uma matriz de 3x3, portanto com 9 módulos, não necessariamente de dimensões iguais.
Cada módulo será posicionado em dos cantos e nas laterais do box, destinando-se o módulo central à área de conteúdo do box.
Maujor

Propriedades CSS3 para bordas com imagens

A seguir uma tabela contendo um resumo das propriedades previstas para a inserção de imagens como bordas de boxes.

	Valores	Valor inicial	Aplica-se	%
border-image-source	nenhum \| <imagem>	nenhum	(1)	Não
border-image-slice	[<número> \| <porcentagem>](1,4) && fill	100%	(1)	(2)
border-image-width	[<length> \| <porcentagem> \| <número> \| auto]{1,4}	1	(1)	(2)
border-image-outset	[<length> \| <número]{1,4}	0	(1)	Não
border-image-repeat	[stretch \| repeat \| round}{1,2}	stretch	(1)	Não
border-image	<border-image-source> \|\| <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? \|\| <border-image-repeat>	(3)	(3)	Não

(1) - Aplica-se a todos os elementos com exceção dos elementos internos das tabelas quando border-collapse é collapse.
(2) Refere-se às dimensões da área para a borda.
(3) Ver propriedades individuais.
Nenhuma das propriedades é herdada e todas são para mídia visual.

A finalidade de cada uma destas propriedades é descrita a seguir.

border-image-source: Define o endereço da imagem.
border-image-slice: Define como a imagem será recortada para ser distribuída nas bordas.
border-image-width: Define a espessura das bordas para inserção da imagem.
border-image-outset: Define uma área externa à área da borda para onde a imagem será deslocada.
border-image-repeat: Define como se dará a repetição da imagem.
border-image: Declaração abreviada para as anteriores.

Suporte

No dia que escrevi esta matéria nenhum navegador oferecia suporte para estas novas propriedades das CSS3. Contudo as engines Gecko e Webkit nas suas versões mais recentes (não testei as anteriores) oferecem suporte parcial com uso dos seus prefixos proprietários para propriedades CSS denominados -moz- e -webkit- respectivamente.

Assim, você poderá começar suas experiências e ir estudando desde já como criar bordas com imagens. Contudo convém notar algumas restrições ao suporte proprietário conforme descritas a seguir. Ressalto contudo que tais restrições não estão documentadas (pelo menos eu não encontrei nada) e se baseiam unicamente em minhas experimentações e testes. Por isso, podem conter falhas. Se você detectar alguma delas, por favor, informe na área de comentários ou mande um email para maujor[AT]maujor{PT]com. Considere que os testes foram realizados para o Firefox 3.6.3, Chrome 4.1.249.1045 e Safari 4.0.5 para Windows. Se houver mais suporte em futuras versões sinta-se à vontade para informar nos comentários.

Restições ao suporte proprietário

As restrições listadas são válidas para ambas as engines citadas.

Não há suporte para as declarações individuais. Use as declarações abreviadas -moz-border-image e -webkit-border-image
Não há suporte para o valor space da propriedade border-image-repeat. Covém notar que a especificação é dúbia com relação a este valor pois enquanto ele é citado na descrição de valores para a propriedade é omitido na expressão da sintaxe geral.
Mesmo na declaração abreviada não há suporte para -moz-border-image-outset e -webkit-border-outset

Exemplos práticos

Vamos examinar a seguir alguns exemplos práticos para termos uma ideia dos princípios de aplicação e utilidade de estilizar bordas com imagens. Nos exemplos que mostrarei será usado o prefixo -moz- para servir o navegador Firefox. Se você usa navegador com engine webkit, basta trocar o prefixo.

Todos os exemplos mostrados nesta matéria podem ser visualizados nesta página de testes.

Observe a seguir um exemplo para esclarecer a sintaxe, atualmente suportada, para aplicação de imagem como borda.

-moz-border-image: url("/imagens/borda.png) 15 15 15 15 / 15px 20px 30px 40px round stretch;

Na sintaxe mostrada informamos que a imagem encontra-se na pasta imagens na raiz do site e tem o nome de borda.png. A seguir informamos que a imagem deve ser recortada em 15px para distribição ao longo das bordas. Os quatro valores são declarados com número puro (não há a unidade) e se referem as bordas top left bottom e right respectivamente. Segue-se uma barra(/) e quatro valores em medida CSS para especificar as espessuras das bordas. Finalmente dois valores indicando a repetição, o primeiro para as bordas superior e inferior e o segundo para as bordas laterais. Notar que pelo menos até agora as especificações não preveem declaração do valor de repetição para cada uma das bordas individulamente e sim duas a duas.

Notar a ausência dos 4 valores para a propriedade border-image-outset, pois como já frizamos ela não é suportada.

Seguem os exemplos. Mostramos a regra CSS e uma imagem da renderização. Forneço ainda uma página contendo todos os exemplos em funcionamento nos navegadores citados. Todos os exemplos usam a imagem mostrada anteriormente e um DIV com dimensões fixas e cor de fundo cinza claro.

Exemplo 1

.div1a {
	border-image: url('borda.png') 15 / 15px round;
  }
.div1b {
	border-image: url('borda.png') 15 / 15px repeat;
  }
.div1c {
	border-image: url('borda.png') 15 / 15px stretch;
  }
.div1d {
	border-image: url('borda.png') 15 / 15px  round  stretch;
  }
.div1e {
	/* esta div não está a vista, apenas reserva espaço */
  }
.div1f {
	border-image: url('borda.png') 15 / 15px stretch  round ;
  }

Renderização

renderização do exemplo1

Notar a diferença entre os valores round e repeat para a declaração border-image-repeat (em destaque na figura). A engine webkit não faz esta diferenciação (possivelmente uma falha na implementação da especificação)

Exemplo 2

.div2a {
	border-image: url('borda.png') 15 / 15px 20px 30px 40px round;
  }
.div2b {
	border-image: url('borda.png') 15 / 20px 40px round ;
  }
.div2c {
	border:15px groove #c30;
	border-image: url('borda.png') 15 round;
  }

Renderização

renderização do exemplo2

Notar que a declaração de uma borda com a propriedade border das CSS2 faz com que navegadores que não entendam CSS3 ou se por um motivo qualquer a imagem para a borda não for carregada a renderização da borda será segundo aquela declaração. Assim é de boa prática fazer declaração segundo as CSS2 ainda que exista a declaração de espessura de borda com border-image-width.

Exemplo 3

.div3a {
	border:15px groove #c30;
	border-image: url('borda.png') 45 / 15px round;
  }
.div3b {
	border:45px groove #c30;
	border-image: url('borda.png') 45 / 45px round;
  }
.div3c {
	border: groove #c30;
	border-width: 15px 45px;
	border-image: url('borda.png') 45 / 15px 45px round;
  }

Renderização

renderização do exemplo3

Notar a diferença de renderização entre as engines Gecko e Webkit. Aqui o Firefox falhou não acatando a declaração para repetir a borda.

Este exemplo 3 visa apenas a mostrar a versatilidade da propriedade border-image e fornecer dados para que você possa analisar e concluir sobre a finalidade de cada declaração. Evidentemente a imagem usada não foi construida para os valores declarados no exemplo, mas oferece opções bem interessantes. Você não acha?