Personalização de bordas com imagem

Introdução

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. 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, tratá-las devidamente e inserí-las como bordas implica em que se construa de forma modular a imagem destinada a personalizar as bordas. Assim fazendo garantimos a consitente manipulação dos módulos da imagem pelos mecanismos internos das CSS com a finalidade de criar as bordas.

Observe a seguir a imagem que usaremos para ilustrar os exemplos constantes deste tutorial e que foi construída para ser aplicada como borda personalizada.

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 destinada a personalizar bordas vamos identificar os diferentes mólulos da imagem mostrada 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, com regras CSS, a cor de fundo do box no qual será aplicada a imagem da borda salve sua figura de modo a preservar a transparência do módulo central (GIF com transparência alpha ou PNG transparente), pois como veremos adiante é 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."

Um princípio básico da construção de bordas com imagens é o seguinte:

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.

• (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 do box (largura e altura) no qual a borda será aplicada.
• (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

Transcreve-se a seguir a página do site caniuse.com que mostra o suporte desta funcionalidade nos navegadores atuais.

IMPORTANTE: É obrigatório declarar-se as propriedades border-style e border-width com valores diferentes de none e 0 (zero) para que a personalização de bordas com imagens tenha efeito.

Exemplos práticos

Mostramos a seguir alguns exemplos práticos para ilustrar os princípios de aplicação e os efeitos de personalização de bordas com uso de imagens.

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

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

Na sintaxe mostrada os valores especificados, na ordem em que foram declarados, são conforme descritos a seguir:

1. border-image-source URL da imagem que no caso encontra-se na pasta imagens na raiz do site e tem o nome de borda.png;
2. border-image-slice Dimensões dos módulos que a imagem deve ser recortada, no caso da imagem mostrada anteriormente que será usada para os exemplos os módulos são de 15px para distribição ao longo das bordas. Aqui são admitidos de um a quatro valores, tal como possibilita a sintaxe CSS tradicional. Os quatro valores devem ser declarados com números admensionais (não se declara uma unidade de medida) e se referem aos lados aos quais as bordas serão aplicadas na seguinte ordem: top left bottom e right respectivamente;
3. Segue-se uma barra(/) de separação e quatro valores expressando um comprimento CSS para especificar as espessuras das bordas;
4. Segue-se uma barra(/) de separação e quatro valores expressando um comprimento CSS para especificar um offset para as bordas (o quanto a imagem da borda deve se afastar dos limites do box);
5. Finalmente um ou dois valores: um valor indica a repetição para a borda em todos os lados do box, e dois valores o primeiro indica a repetição para as bordas superior e inferior e o segundo para as bordas laterais.

A propriedade border-image-outset admite de um a quatro valores, tal como possibilita a sintaxe CSS tradicional. Os quatro valores devem ser declarados com unidade de medida CSS e se referem aos lados aos quais as bordas serão aplicadas na seguinte ordem: top left bottom e right respectivamente

Nota: A declaração de borda com uso a propriedade border das CSS2 serrve como fallback para os casos em que o navegador não suporte bordas com imagens ou a imagem para a borda não tenha sido carregada. 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.

Exemplos

Mostramos a seguir alguns exemplos para ilustrar os princípios de aplicação e os efeitos de personalização de bordas com uso de imagens.

Os exemplos usam a imagem mostrada anteriormente e um elemento DIV com dimensões 200px x 90px 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 {
  border-image: url('borda.png') 15 / 15px stretch  round ;
}

Renderização

Notar a diferença entre os valores round e repeat para a declaração border-image-repeat. Para o primeiro os módulos da imagem são distribuidos sem "quebras" nas extremidades da borda.

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-image: url('borda.png') 15 / 15px / 30px round;
}

Renderização

Exemplo 3

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

Renderização

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.

Visite o tutorial: Propriedades CSS para estilização de bordas que ensina os fundamentos de aplicação de bordas em boxes.

Compartilhe essa matéria com seus amigos