Seguindo com a série de posts sobre CSS3, hoje vamos falar sobre bordas e sombra (border e shadow em inglês) com CSS3, mais especificamente falaremos sobre:

• border-color
• border-image
• border-radius
• box-shadow

Se você não viu o post anterior a este, é bom ver agora :

Iniciando com CSS3

A partir de agora os tutoriais desta série serão feitos em HTML5 e CSS3, então pare de usar Internet Explorer < 9. Se você ainda não conhece os seletores em CSS3, veja o artigo anterior.  Algumas propriedades só funcionam em determinados browsers, quando isso ocorrer vou informar :).

Para não ficar perdido na sintax de cada propriedade, tente “decorar” esta pequena legenda abaixo:

[] – propriedade variante, ou seja, pode se X ou Y.

[]? – propriedade opcional.

| ou || – que dizer ou. Exemplo: X || Y (x ou y).

<> – é um valor definido pelo desenvolvedor – você.

{} –  geralmente é o número de vezes que se deve usar um determinado valor. Exemplo left{4}, seria left left left left.

Border-colors

Define a cor da borda. Neste caso as cores da borda.

Sintax: -moz-border-[top | bottom | left | right]-colors: [<cor>]* <cor> | none

Antes que atirem pedras em mim falando que border-color funciona em todos os navegadores, lembre-se que estamos falando de CSS3 e border-colors está no plural – não border-color.  Sendo assim, essa novidade só funciona no Firefox (e demais feitos com a mesma engineer – Gecko) :

div#border-colors{
	background: #CCC;
	padding: 20px;
	border: 10px solid #666;
	-moz-border-bottom-colors: #A2A2A2 #FFEFEF #770000 #4504C1 #016FD5 #10BAD0 #A2A2A2 #FFEFEF #770000 #4504C1;
	-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
	-moz-border-left-colors: #300 #AAA #222;
	-moz-border-right-colors: #A2A2A2 #FFEFEF #770000 #4504C1 #016FD5 #10BAD0;
}

O segredo por trás dessa propriedade é o tamanho – width – da borda e o n° de cores. Por exemplo, se eu tenho 5px de width, logo é “bom” eu usar cinco cores (#111 #222 #333 #444 #555). Disse “bom” porque você pode sim usar mais cores,  só que a bagunça nem você vai entender, se é que você esta entendendo agora ;).

As cores sempre começam de fora para dentro, ou seja #111 será a primeira cor, ou a cor mais distante do elemento e #555 será a última, ou a cor mais próxima (colada) ao elemento.  Se você usar 4px de width, com somente 2 cores (#F00 e #CCC), o primeiro pixel (1px) será na cor #F00 e os demais (3px) na cor #CCC.

Veja o exemplo | Mais detalhes

Border-Image

Basicamente usa uma imagem no lugar da cor em uma borda. Funciona em todos os navegadores com suporte a CSS3.

Sintax: [-moz- | -webkti-]?border-image: <uri> [<numero> | <porcentagem>]{4} [ / <tamanho>{1,4} ]? [stretch | repeat | round]{0,2} | none

h3 + div{
	color: #000;
	padding: 20px;
	border: 10px solid #666;
	border-width:15px;
	border-image: url(borda.png) 27 27 27 27 round round;
	-moz-border-image: url(borda.png) 27 27 27 27 round round;
	-webkit-border-image: url(borda.png) 27 27 27 27 round round;
}

Na sintax primeiramente temos a url da imagem e depois quatro números. Estes 4 números ou porcentagens, são os valores que especificam qual parte da imagem será usada para a borda, ou seja, qual parte da imagem será cortada para criar a borda. Por exemplo, tenho uma imagem e quero corta 5px dela em todos os lados, para isto eu usaria: 5 5 5 5. Os 4 números são respectivamente top, right, bottom e left . Os números são valores em px – somente px, você não pode colocar 5px ou 5em por exemplo, só é aceito 5 (ou seja somente NÚMEROS!!!) ou em porcentagem – ai teria de ser 5%.

Opcionalmente também podemos definir o tamanho da borda para cada lado. Para isso usamos a barra “/“, seguida das quatro medidas – uma para cada lado – que podem ser em qualquer formato, px, em, pt... apenas temos que lembrar de usar “/” para “dizer” ao CSS que estes valores são para o tamanho da borda, ou melhor dizendo border-width.

Depois, vem o modo como a imagem será tratada. Os valores são:

stretch – a imagem gerada é redimensionada (de qualquer forma) para se encaixar, distorcendo a imagem.

round – redimensiona a imagem (proporcionalmente) para que se encaixe na área, também acontece a repetição da imagem, mas não em partes, se vai repetir, repete a imagem por inteiro, sem cortá-la.

repeat – sem segredo… repete a imagem até que se encaixe na área, mais ou menos como acontece com background-repeat. Uma boa prática é definir uma borda “reserva”, ou seja, a cor de borda e usar imagens sem transparência… assim se ocorrer algum erro no border-image a borda “reserva” entra em cena.

Alguns pontos interessantes:

• Não é bem uma borda com imagem, é mais um segundo backgrund, só que mais complicado.
• Webkit trata border-image um pouco diferente dos demais, então pode ficar complicado conseguir a mesmo resultado em todos os navegadores.
• Em alguns casos, o Opera também faz o tratamento diferente do esperado.
• Opera não rendeniza border-image se tive a barra “/” com o tamanho da borda. So não usar os valores opcionais (e a barra) que resolver o problema :).
• Eu não uso border-image nem me pagando!!! Mas está ai pra quem quer aprender e usar.

Veja o exemplo | Mais detalhes

Border-Radius

Este é o que mais uso. Faz com que a borda fique redonda (mesmo que não haja border no elemento).

Sintax: [-moz-|-webkit-]?border-radius: [<comprimento> | <porcentagem> ]{1,4} [ / [ <comprimento> | <porcentagem> ]{1,4}?

div:first-child{
	background: #EEE;
	border: 1px solid #CCC;
	padding: 20px;
	margin: 10px;
	border-radius: 25px 0 0 25px;
	-moz-border-radius: 25px 0 0 25px;
	-webkit-border-radius: 25px 0 0 25px;
}

Usar border-radius é tão simples quanto definir margin ou padding a um elemento. Obviamente são quatro posições disponíveis para “arredondamento”. As posições são divididas em top (top-left e top-right) e bottom (bottom-left e bottom-right). Na ordem certa seria: top-right, bottom-right, bottom-left e top-left.

Como acontece no border-image, há mais 4 medidas opcionais seguidas pela barra “/”. Neste caso as medidas representam um quarto da elipse para cado posição. É um recurso avançado e de difícil entendimento, por isso é importante o domínio da matemática – mais especificamente elipse – para não ter problemas em entender como funciona “por trás” o border-radius. Não vou me ater a detalhes aqui para não tornar a leitura cansativa, mas uma vez entendido como funciona a elipse, é só relacionar e fazer alguns testes que você irá compreender rapidamente.

Se você, por obra do destino (rs) não usar esta propriedade em formato shorthand, precisará “queimar” um pouco mais de neurônios para decorar a lista no formato expandido. O chato é que para cada enginer a sintax é diferente, observe:

/*Mozilla*/
-moz-border-radius-topleft: 4px 2px;
-moz-border-radius-topright: 3px 4px;
-moz-border-radius-bottomright: 6px 2px;
-moz-border-radius-bottomleft: 3px 4px;

/*Webkit*/
-webkit-border-top-left-radius: 4px 2px;
-webkit-border-top-right-radius: 3px 4px;
-webkit-border-bottom-left-radius: 6px 2px;
-webkit-border-bottom-right-radius: 3px 4px;

/*Demais - Webkit é um pouco semelhate a este*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-left-radius: 6px 2px;
border-bottom-right-radius: 3px 4px;

Neste caso o quarto da elipse passa a ser o segundo valor em cada propriedade.

Considerações:

• Priorize o formato shorthand.
• Bordas no estilo dashed e dotted, são rendenizados formato sólido – solid.
• Valores em porcentagem não funcionam no Webkit.
• Webkit não suporta somente um valor para todos os lados, é necessário que use pelo menos 2 valores para funcionar corretamente – No Chrome funciona, mas no Safari não.
• Em alguns casos pode ser que você não consiga o mesmo resultado no Webkit mesmo usando a sintax corretamente. Para corrigir este problema, no Webkit use as medidas para cada lado em propriedades separadas.

Veja o exemplo | Mais detalhes

Box-shadow

A propriedade box-shadow adiciona uma sombra ao elemento, podendo ser por dentro (inset) ou por fora… É um efeito muito interressante  e de grande utilizade principalmente para performance do site, já que ele substitui imagens.

Sintax: [-moz-|-webkit-]?box-shadow:  <sombra> [ , <sombra ]* | none

<sombra>: inset? && [ <posicao-x> <posicao-y> <blur-radius>? <spread-radius>? <cor>? ]

:root h3 + div{
	background: #FFF;
	border: 1px solid #ddd;
	padding: 20px;
	margin: 50px;
	box-shadow: 2px 2px 2px 0 #eee;
	-moz-box-shadow: 2px 2px 2px 0 #eee;
	-webkit-box-shadow: 2px 2px 2px 0 #eee;
}

Como podemos ver acima, primeiramente temos as medidas para posicionamento X e Y, estes podem ser em qualquer formato (px, em…). Para melhor entendimento, a posição X é o mesmo que posição horizontal relativa ao elemento (lembra do eixo X e Y do plano cartesiano?).

Por exemplo, se eu tenho uma div com 500px de largura e no box-shadow eu definir 2px para a posição X, seria o mesmo que criar uma uma “segunda div” (que é o box-shadow) com a mesma largura (500px) e margin-left de 2px, ou seja ela (a “segunda div”) ficaria 2px à frente. É mais ou menos assim que funciona o posicionamento do box-shadow. Para a posição Y seria a mesma coisa, mas no eixo vertical.

Logo após as posições temos o blur-radius, que é o responsável por criar o efeito do sombreamento. Na sintax diz que este valor é opcional, com o padrão sendo 0 (zero). Se você quer o efeito de ofuscamento no sombra, você deve setar o valor para esta propriedade, caso contrário ficará uma sombra “reta”.

Ao definir o valor para maior que 0 (zero) para blur-radius, a “segunda div” que citei anteriormente será aumentada em sua largura e altura. Por exemplo, se o valor de blur-radius for igual a 5px , a “segunda div” passará a ter 510px de largura e 510px de altura. Recomendo que você tenha isso sempre em mente, pois irá diferenciar no posicionamento da sombra.

Outro valor opcional é o spread-radius. Sua função é semelhante ao blur-radius… também aumenta o tamanho da sombra (a “segunda div”), só que sem criar o efeito de ofuscamento. É uma segunda propriedade, e pode ser muito útil em alguns casos.

Concluindo, para o último valor, temos a cor da sombra, aqui não há segredo. Somente vale lembrar que se houver valor para blur-radius maior que zero, então a cor na largura – ou valor – do blur-radius será enfraquecida para criar o efeito de ofuscamento.

Vamos as observações:

• No posicionamento, você também pode usar valores negativos, neste caso a sombra seria rendenizada no lado oposto ao padrão.
• Blur-radius não suporta valores negativo.
• Opera não aceita o valor inset, isto causará um erro e a propriedade será ignorada.

Veja o exemplo | Mais detalhes

Bônus: Apostila CSS3

No final desta série vou disponibilizar estes post em uma apostilha. Então comentem sobre a idéia, deêm sugestões e aguardem para fazer o download ;).

A Séria Completa

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3

Até a próxima.