BORDAS EM CSS3

Definir imagem para as bordas é uma daquelas propriedades da CSS que você se pergunta como vivíamos antes de conhece-lá. É muito mais fácil entender testando na prática, por isso sugiro que se você estiver perto de um computador, faça testes enquanto lê este texto. A explicação pode não ser suficiente em algumas partes, mas a prática irá ajuda-lo a entender.
Esta propriedade ainda está em fase de testes pelos browsers, por isso utilizaremos os prefixos para ver os resultados.Utilizarei apenas o prefixo do Safari, mas o Firefox já entende essa propriedade muito bem.
A sintaxe do border-image se divide em três partes: 1) URL da imagem que será utilizada. 2) Tamanho do slice das bordas. 3) Como o browser irá aplicar a imagem na borda.
Segue um exemplo da sintaxe abaixo:

a {
display:block;
width:100px;
-webkit-border-image: url(border.gif) 10 10 10 10 stretch;
}


Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada uma das bordas do elemento. A sintaxe é igual a outras propriedades com 4 valores: top, right, bottom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber.

Dividindo a imagem

Para posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 seções:

Quando a imagem é colocada no elemento, o browser posiciona os cantos da imagem juntamente com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem é colocado no canto superior esquerdo, o 3 no canto superior direito e assim por diante. Se você fizer o teste, a imagem aparecerá no elemento como se estivesse desproporcional. Isso é normal porque a imagem deve seguir as proporções do elemento e não as suas próprias.

Comportamento da imagem

O comportamento da imagem é a parte mais importante porque define como o centro da imagem (no caso do nosso exemplo a seção de número 5), irá ser tratada. Há vários valores, mas que é mais simples de se entender é a stretch, que estica e escala a imagem para o tamanho do elemento aplicado. Há outros valores como round e repeat. Mas hoje alguns browsers não tem tanto suporte e acabam ou ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como o repeat. Vamos nos concentrar com o stretch e você entenderá como funciona a propriedade.

Aplicação

Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer um botão ao estilo iPhone. A coisa é simples e sugiro que você faça testes individualmente brincando com os valores das bordas e com diversas outras imagens para ver como funciona o recurso.

Irei aplicar o estilo em um link. O código que irei aplicar segue abaixo:

a {
display:block;
width:100px;
text-align:center;
font:bold 13px verdana, arial, tahoma, sans-serif;
text-decoration:none;
color:black;
}

Para inserir a imagem, colocamos as duas linhas abaixo:

border-width:10px;
-webkit-border-image: url(button.png) 10 stretch;

Defini com a primeira linha que a borda teria 10px de largura com a propriedade border-width. Na segunda linha define que a imagem utilizada seria a button.png, que as áreas da imagem teriam que se estender por 10px, e o valor stretch define que a imagem cobrirá o elemento inteiro, o resultado segue abaixo:

Para você ver como tudo ali é meio estranho. Se eu diminuir o valor de 10 do border-image, que é o valor que define quanto a imagem deve se estender nas bordas, veja como fica:

Temos o border-width definindo a largura da borda, mas não temos nenhum valor dizendo quanto dessa largura a imagem deve tomar.
Os efeitos são bem estranhos quando esses valores estão mal formatados. Por isso, teste na prática essa propriedade para que não haja problemas a implementar em seus projetos. O pulo da gato, para mim, é a propriedade border-width.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s