Page 59 - Locaweb - Edição 27
Basic HTML Version
locaweb
border-image-slice:
diz como será o recorte
da imagem. Pode ser uma quantidade fixa de
pixels, porcentagem ou ‘fill’, para preencher a
imagem, preservando seu centro.
border-image-width:
configura a largura
das bordas para colocar a imagem.
border-image-outset:
desmarca uma
área exterior à borda para onde a imagem será
deslocada. Define a repetição da imagem. Pode
possuir os seguinte valores:
•
round:
a imagem é repetida por toda a
área a ser ocupada. Se a última repetição da
imagem não "casar" com a dimensão restante
na borda, a imagem é automaticamente
ajustada para não causar impressão de que
houve "corte" na repetição.
•
repeat:
a imagem é repetida por toda a
área a ser ocupada.
•
stretch:
a imagem é esticada até
preencher o espaço a ser ocupado pela borda.
.divComBorda {
border-image-source: url('borda.png');
border-image-slice: 50%;
border-image-width: 40px;
border-imagem-repeat: round;
}
As bordas podem ser arredondadas, anulando
a necessidade de criar uma imagem no Fireworks ou
Photoshop para dar a impressão de arredondamento.
border-radius:25px;
O CSS3 oferece também um novo esquema de
sombreamento para boxes, como a div. Para isto, basta
informar os dados de sobreamento da mesma maneira
que ocorre para textos, como citado anteriormente.
box-shadow: 12px 8px 6px #ccff33;
O mais complicado nesses casos de bordas é a
compatibilidade com os navegadores. Afinal, cada um
segue um padrão diferente.
Poder de fogo //
Com todos esse recursos, pode-se
concluir que o CSS3 vem com um poderio muito forte,
sanando algumas carências e auxiliando bastante os
designers. O padrão, certamente, reduzirá a necessidade
de aplicação de imagens em itens que antes eram
necessários, jogando a responsabilidade para cima dos
motores dos browsers.
Mas atenção: não encare o CSS3 como uma
panaceia. Afinal, os browsers usam os mais variados
motores (gecko, webkit, por exemplo) e isso traz um
cenário que, inicialmente, não parece estar livre de
incompatibilidades. Além disso, é preciso estudar bastante
e ficar de olho nas iniciativas do mercado para se adaptar
ao novo formato.
Informação
na fonte
Obtenha informações sobre as
novidades do CSS3 diretamente
no site da W3C, que está
criando e validando os padrões
nologia. Para isso, acesse
Ao montar um layout com o
novo padrão, não haverá mais a
necessidade de se prender à lista
de fontes padrão daweb. O CSS3
permite o uso de fontes externas,
com a utilização do @fonte-face
59
