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/
Discussão (1)
Carregando comentários...