Técnicas de CSS3 para você se familirizar.

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 /applications/core/interface/imageproxy/imageproxy.php?img=http://www.dmolin.com.br/blog/wp-includes/images/smilies/icon_biggrin.gif&key=907ca29485a32c2273356ae0d8470b3173a360f6b250991f0e05039503ec4c63" alt="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% /applications/core/interface/imageproxy/imageproxy.php?img=http://www.dmolin.com.br/blog/wp-includes/images/smilies/icon_wink.gif&key=ec5a237d3d9c3e24f8ac297363ed3d6543002e00ddd1df1f0ac0c34e14895ce6" alt="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 /applications/core/interface/imageproxy/imageproxy.php?img=http://www.dmolin.com.br/blog/wp-includes/images/smilies/icon_wink.gif&key=ec5a237d3d9c3e24f8ac297363ed3d6543002e00ddd1df1f0ac0c34e14895ce6" alt="Imagem Postada" /> .

Até mais pessoal. Qualquer coisa, só comentar. /applications/core/interface/imageproxy/imageproxy.php?img=http://www.dmolin.com.br/blog/wp-includes/images/smilies/icon_razz.gif&key=bf449ab129c0583d82cf82a4c7877f2be9722130810e900973b734dcc94e3f61" alt="Imagem Postada" />

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