Técnicas de CSS3 para você se familirizar.

André D. Molin · Setembro 8, 2009

O CSS3 já está nas pautas da W3C há algum tempo. Por isso ébom já ir se acostumando, pois haverá muitas mudanças na forma quedesenvolvemos sites.

As novidades já começam com a maneira em que a W3C está atualizando oCSS. O processo está sendo feito em módulos, que são desenvolvidos porgrupos de desenvolvedores. Logo, o processo se torna muito mais ágil.

Portanto começe a estudar o que vai mudar, e vá se acostumando. Mudanças virão.

Neste artigo irei mostrar a vocês 4 técnicas quequase sempre usamos imagens para por-lás em prática, mas que agoraserão feitas apenas com algumas linha de código Imagem Postada . Tudo isso graças ao CSS3.

Então vamos lá.

1. Bordas Arredondadas

Normalmente, para fazer as bordas arredondadas, você faria asimagens de cada canto, criaria vários elementos. E então iria juntartudo isso para formar apenas um bloco com as bordas arredondadas.

Com o CSS3 isso será possível com apenas 1 linha código! A propriedade será essa.

div.noticias {
 -moz-border-radius: 10px;
}

Aqui eu simplifiquei a propriedade, em que todos os cantos terãoborda de raio 2px. Para definir valores diferentes a cada canto, bastausar a sintaxe completa.

div.noticias {
-moz-border-radius: 10px 15px 11px 5px;
}

Cada valor define a borda de cada canto do elemento selecionado.

2. Mudando Opacidade

A opacidade de um elemento pode ser obtida usando uma imagem PNG comopacidade. Isso nos navegadores que renderizam PNG-32 corretamente. Ouentão usamos os famosos hacks de CSS, que geravam muitas e muitas linhas de código.

No CSS3 basta usar esta propriedade:

div.noticias {
 background-color: #000000;
 opacity: 0.5;
}

O efeito é obtido com a propriedade opacity, onde 1 é 100% de opacidade e 0 (zero) é um elemento transparente. Portanto os valores variam num intervalo entre 0 e 1.

Neste caso acima, a opacidade foi para 50% Imagem Postada .

3. Sombras

As sombras podiam ser feitas definindo uma imagem como background.Esta imagem com o efeito da sombra já feito por algum editor deimagens, como o Photoshop e/ou Fireworks e etc. Não é muito legal, pois quando mais imagens no site, mais requisições ao servidor são feitas, mais lento o site fica.

O CSS3 veio para simplificar. Basta isso para conseguir o mesmo efeito:

div.noticias {
 -webkit-box-shadow: 2px 3px 5px #000000;
}

O primeiro parâmetro é a distância horizontal entre a sombra e oelemento. O segundo parâmetro é a distancia vertical entre a sombra e oelemento. Já o terceiro parâmetro é o tamanho desta sombra, a partir daborda do elemento.

Por fim temos o quarto e último parâmetro, que é a cor da sombra.Não mais ficamos presos aos tons de cinza padrões. Podemos definirqualquer cor.

4. Redimensionamento de Elementos

Para criar elementos redimensionaveis, atualmente devemos usar uma série de java scripts. Há tambêm bibliotecas como o jQuery que reduzem o trabalho em relação a isso, mas nada comparado com o que o CSS3 faz.

Veja como podemos fazer isso:

div.noticias {
 resize: both;
 overflow: auto;
 max-width: 400px;
 min-width: 100px;
 max-height: 1280px;
 min-height: 200px;
}

Ao usar o valor both na propriedade resize, estou dizendo que oredimensionado por ser feito em ambas as direções verticais ehorizontais. E adicionalmente, posso adicionar "limites" máximos emínimos de redimensionamento. Graças as propriedades que você já conheçe

(min/max width e min/max height).

Exemplos

Abaixo pode visualizar um arquivo com exemplo de uso dessas técnicas.

Exemplo: http://www.dmolin.com.br/blog/2009/09/08/tecnicas-de-css3-para-voce-se-familiarizar/

Imagem: http://www.dmolin.com.br/blog/2009/09/08/tecnicas-de-css3-para-voce-se-familiarizar/

Atenção!: Por enquanto, poucos navegadores tem suporte a essas propriedades do CSS. Então elas podem não funcionar no seu computador.

Atenção²!:Note que estou usando alguns prefixos antes das propriedades (-moz e-webkit). Eles são temporários, até que seja lançado o CSS3. Depoisdisto, basta tirar esses prefixos .

Até mais pessoal. Qualquer coisa, só comentar. Imagem Postada