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
2 Responses
Fala ae pessoal tenho uma duvida eu li que vcs usaram como classe
exemplo –>> .caixa {
eu aplico isso inline ou externo??faz alguma diferença?
abç!
Karalhow Mano Esse Blog è Muito Pika…
Muito Bem Administrado…
Conteúdos originais muito bom..