Bordas – Parte 4: border-image

border-image (Bordas com imagens)


O CSS3 introduz entre muitas propriedades que irão mudar a vida de um designer da Web, uma que é extremamente poderosa: border-image. 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.

Vamos começar com um exemplo simples para ver como a imagem de borda pode ser invocada e instruções a serem dadas:

Exemplo:

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz-, e para o Safari e Google Chrome o -webkit-.

Vamos entender passo-a-passo:

A primeira propriedade, obviamente, descreve um elemento de borda, como de costume: a largura das quatro bordas são expressos em pixels, no sentido horário (top, border-right, border-bottom, border-left).

A segunda propriedade é a que vai realmente fatiar a imagem. Normalmente existem três propriedades border-image (embora, se você ler cuidadosamente as especificações, você encontrará uma quarta, o que só seria confuso neste ponto).

Passo 1: Imagem

Usaremos a imagem (border.png) que será cortada para decorar o nosso elemento. E esta é a nossa imagem:

borda

Passo 2: 30% 35% 40% 30%

A segunda parte descreve a maneira como será cortada a imagem em nove partes (fatias):

fatias

Esses valores podem ser expressos em percentuais, ou seja, sem qualquer unidade de largura em pixels.

Passo 3: round round

A última parte é o valor de alongamento. Ele descreve como as fatias para os lados e na parte média são escalados e azulejos. Algumas coisas a lembrar:

  • Especificando somente um valor é o mesmo que especificar o dobro do mesmo lado.
  • Há três valores possíveis: “stretch”, “repeat” and “round”.
  • O valor padrão é “stretch”.

Esta é a parte mais complexa da especificação, por isso merece uma demonstração detalhada. Usaremos a seguinte imagem:

diamantes

Exemplo com “stretch”:

Resultado do exemplo:

fatiastretch

Exemplo com “repeat”:

Resultado do exemplo:

fatiarepeat

Exemplo com “round”:

Resultado do exemplo:

fatiaround

Veja o que pode-se fazer:

Você tem os recursos necessários para ser criativo, imaginativo e certamente se você tem bom senso vai obter bons resultados. Aqui está algumas demonstrações:

Exemplo 1:

cantos arredondados

Resultado do exemplo:

Borda com imagem

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplo 2:
Borda Complexa

Resultado do exemplo:

Borda com imagem

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplo 3:

Borda Complexa

Resultado do exemplo:

Borda com imagem

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Chegamos ao fim desse módulo, gostaria de já estar passando especificações definitivas a respeito das propriedades CSS3 e não um simples rascunho, assim como quando estejam implementados em todos navegadores.


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DE SITES COMO HTTP://WWW.IRBABE.COM


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

Nenhum comentário ainda.

Join the Conversation