Especial! CSS3 – Layout

Tutorial Anterior Da Série Aprende CSS Com Maicon Sobczak > Especial! CSS3 – Efeitos Em Textos

O design das páginas web 2.0 é marcado por gradientes sutis, sombras na medida e cantos arredondados. O problema é que para atingir esta aparência é necessário cortar imagens e adicionar marcação extra. Ou em alguns casos usar código javascript.

Com as novas especificações do CSS3, transpor o design do programa gráfico para a realidade dos browsers tornou-se um processo mais produtivo e rápido.

Neste último tutorial sobre as novas propriedades CSS3 veremos as que tratam sobre a criação do layout. São elas:

• box-sizing
• background, background-size e background-origin
• border-radius
• border-colors
• border-image
• box shadow
• opacity
• gradients
• rgba
• hsl
• resize
• transform e transition

Muitas dessas propriedades já foram implementadas há tempos nos browser modernos, outras, no entanto, funcionam apenas em um ou dois. Só uma coisa é certa: no IE8 o suporte é praticamente nulo.

Neste tutorial não vou abordar nenhum filter ou mostrar as soluções javascript para que alguma das propriedades funcione no IE. O foco é somente CSS.

box-sizing

Em uma definição simples, o box model especifica quais propriedades da folha de estilo são somadas para definir o tamanho do elemento. Em uma div, por exemplo, por padrão a largura não é somente a que foi definida no width, mas também a soma da borda, e do espaçamento.


.caixa{
-moz-box-sizing: padding-box; /* Firefox */
-webkit-box-sizing: padding -box; /* Chrome */
box-sizing: padding -box; /* IE8 e Opera */

-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Chrome */
box-sizing: border-box; /* IE8 e Opera */

}


Usando o box-sizing, ao invés do padding ser aplicado a partir do tamanho definido em width, e com isso alargar mais a div, ele é aplicado para dentro, deixando menos espaço para o conteúdo. A mesma coisa acontece com o border. Ao invés de somarem com a largura, elas subtraem.

Esta propriedade interfere diretamente no arranjo do layout, e como somente as últimas versões dos navegadores aceitam, vamos ter que esperar mais um tempo para começar a usar.

background, background-size e background-origin

Com o CSS3 podemos adicionar diversas imagens de fundo em um sistema de camadas. Cada imagem pode ser posicionada independentemente possibilitando resultados incríveis. E o melhor é que é utilizada a mesma propriedade background do CSS2.


.caixa{
background:url(imagem01.jpg) no-repeat top left;
background: url(imagem01.jpg) no-repeat top left, url(imagem02.jpg) no-repeat bottom right;
}

Primeiro é declarado o background normalmente para os browsers que não implementaram múltiplos backgrounds. Em segunda é declarada novamente a propriedade e são listadas as imagens utilizadas. Uma na parte superior esquerda e outra na inferior direita.

Adicionando a propriedade background-size é possível criar mosaicos e redimensionar a imagem de fundo conforte o tamanho do elemento. Aceita medidas em porcentagem, pixels e em.


.caixa{
background:url(imagem01.jpg) no-repeat top left; background: url(imagem01.jpg) no-repeat top left, url(imagem02.jpg) no-repeat bottom right;
background-size:60% 50%;
}


Somente o Safari, Konqueror e Chrome implementaram esta função e parece que o Firefox 3.6 então nem adianta adicionar o prefixo do navegador.

Por padrão a imagem de fundo começa na extremidade do elemento, se ele tiver borda esta ficara sobre a imagem. Com o background-origin você escolhe se começa a partir da borda, do espaçamento ou do conteúdo.


.caixa{
background-origin: border-box; /* A partir da borda */
background-origin: content-box; /* A partir do início do conteúdo*/
background-origin: padding-box; /* A partir do espaçamento */

}

sistema gestão banners
script banner
gestoa banners

border-radius

Lembra do trabalho cansativo que era criar cantos arredondados? Pois os seus problemas acabaram! Basta adicionar border-radius na declaração e tudo esta resolvido.


.caixa{
border-radius:10px; /* Chrome */
-moz-border-radius: 10px;} /* Firefox */


Se você quer apenas um dos cantos arredondados basta informar:


border-top-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;


Como você pode ver o Firefox interpreta bem ao seu jeito. E além dele somente o Chrome, que interpreta a especificação CSS3 possibilitam esta funcionalidade.

border-image

Chega de borda pontilhada ou sólida. Com o border-image você pode criar bordas com a aparência que quiser. Informe o endereço da imagem como ela deve ser cortada e o padrão de repetição. Para que ela funcione é necessário que a largura da borda seja definida com o border-width.

.caixa{
border-width: 10px;
border-image: url(“borda.png”) 20 10 20 10 round;
-webkit-border-image: url(“borda.png”) 20 10 20 10 round;
-moz-border-image: url(“borda.png”) 20 10 20 10 round;

Esta propriedade basicamente corta a imagem em 9 partes e os quatro valores são para informar a porcentagem do corte. Conforme a largura da borda a imagem é ajustada.

Somente Chrome, Safari e Firefox implementaram.

border-colors

Com a melhora do border-color é possível definir tantas cores quanto a espessura da borda. Se a borda tem 5px, cada pixel pode ser de uma cor.

.caixa {border:10px solid #0C0;
-moz-border-left-colors: #060 #333 #333 #333 #903 #CF9 #09F;}

É feita a declaração normal da borda para os browsers que não implementaram esta funcionalidade e em seguida usamos a border-colors. O único navegador que interpreta esta proprieadade é o Firefox, por isso o prefixo –moz-.

É preciso definir as cores de cada um dos cantos, no exemplo foi apenas a esquerda (left), em seguida poderia ser posta a direita (right), base (bottom) e topo (top). Como a borda tem 10 pixels, mas apenas 7 cores foram definidas, a última se repete até fechar a conta.

box-shadow

Formando dupla com as bordas arredondas, o efeito de sombra em uma div é um dos efeitos mais comuns e interessantes. E também exigia bastante trabalho e marcação extra. Com o box-shadow tudo é feito em segundos.

.caixa{
box-shadow:5px 5px 5px #333;
-moz-box-shadow:5px 5px 5px #333;
-webkit-box-shadow:5px 5px 5px #333;}

Os quatro parâmetros são: deslocamento horizontal, vertical, desfoque e cor. Valores negativos para o deslocamento aplicam a sombra para a esquerda e para o topo. É possível aplicar mais de uma sombra para o mesmo elemento, basta separar as declarações com uma virgula.

.caixa{

box-shadow:5px 5px 5px #333, -10px -5px 3px #0ff;
-moz-box-shadow:5px 5px 5px #333, -10px -5px 3px #0ff;
-webkit-box-shadow:5px 5px 5px #333, -10px -5px 3px #0ff ;}

Pelos prefixos você já deve ter entendido em quais browsers esta propriedade funciona.

opacity

Uma das propriedades do CSS3 mais implementada entre o browsers é a opacidade. O IE suporta somente com filtro.

.caixa{opacity: 0.7;}

Absurdamente fácil, não? Os browsers modernos nem precisam do prefixo para funcionar! Os valores vão do 0, que deixa transparente ao 1, opaco que é o valor padrão. No exemplo a opacidade é de 70%.

gradient

Quando esta propriedade estiver totalmente implementada, você não vai precisar fatiar as imagens para criar depois no navegador. As possibilidades de customização são muitas, assim como a aplicação. Cor de fundo, bordas e marcadores de lista são alguns.

.caixa{

background: -webkit-gradient(linear, left bottom, right top, from(#f00), color-stop(0.5, #000));}

background: -moz-linear-gradiente(45deg, red, black); /* FF 3.6*/

Se você usar o Chrome ou Safari poderá ver o resultado do código acima. Foi definido um gradiente linear, que começa da base esquerda em direção ao topo direito, indo do vermelho para o preto com a transição acontecendo no ponto médio (0.5).

É possível somar as declarações criando gradientes realmente complexos e também radiais. O valor da cor pode ser escrito também com a propriedade rgba, assim como a transição pode ser em percentagem. Muito que experimentar.

.caixa{ background: -webkit-gradient(linear, left bottom, left top, from(#f00), to(rgba(288,199,0,0)), color-stop(0.3, #000), color-stop(70%, #0C3));}

rgba

As cores apresentadas no monitor são formadas definindo valores diferentes para o vermelho, verde e azul. O 0 é ausência de cor e o 255 é a cor. Pelo sistema RGB o azul é

0 0 255

No rgba assim é que são formadas as cores. Decorar as cores no hexadecimal é muito mais fácil que isso, então qual a vantagem? A possibilidae de definir transparência, graças ao canal alfa que é a letra “a” no nome da propriedade. Um azul 30% de opacidade fica:

h1{color:rgba(0,0,255,0.3);}

A propriedade também aceita valores em porcentagem. Não precisa do prefixo do navegador para funcionar.

hsl e hsla

Outra alternativa para criar cores é usando o hsl, que usa um sistema diferente. O primeiro parâmetro é a posição da cor no círculo cromático, o segundo a saturação que é a adição de cinza na cor e por último a luminosidade. Uma variante é a hsla que aceita transparência.

h1{color:hsl(180,50%,50%);}}
h1{color:hsla(180,50%,50%, 0.8);}}

Adivinha qual o único navegador que não interpreta.

resize

Uma propriedade especial para textareas. Permite ao usuário redimensionar a caixa à vontade. Para limitar a direção do redimensionamento os valores disponíveis são horizontal e vertical. Para liberdade total use both.

textarea{resize:both;}

No momento apenas Chrome e Safari implementaram. Mas devido a grande utilidade em pouco tempo os outros browsers tomarão uma atitude.

transform e transition

Criar animações usando CSS.. Só o que faltava. Agora não falta mais! Esta é a novidade mais insana e legal do CSS3. Animações simples que vão levar a interação do usuário com o website ao extremo.

Dentre as possibilidades está rotacionar, esticar, redimensionar e deslizar. Que podem ser somadas e não alteram o layout.

img{transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;}

img:hover{transform: rotate(360deg) scale(3);
-webkit-transform: rotate(360deg) scale(3);
-moz-transform: rotate(360deg) scale(3);}

Quando a seta do mouse parar obre uma imagem ela ficará 3 vezes maiores depois de uma rotação de 360 graus. No Firefox a animação não é muito boa, então teste no Chrome ou Safári.

Veja neste vídeo o que esta por vir.

Conclusão

Como explicado durante a apresentação das propriedades, a maioria ainda não está ganhando suporte. Não depender delas para que o site funcione é uma decisão inteligente.

Leia também o nosso artigo CSS – Criação de Layout

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > CSS – Melhores Práticas