Cantos arrendodados no Firefox e no CSS3
Hoje a tarde precisei fazer uma div flutuante com cantos arredondados para um projeto e vasculhando na net encontrei uma solução muito legal, porem não aplicavel hoje. Trata-se da propriedade “moz-border-radius”, que infelizmente é implementada apenas no Firefox. Vou mostrar um exemplo só para vocês terem ideia do quanto essa propriedade torna uma tarefa, que hoje é chata, muito mais facil.
* Propriedade: -moz-border-radius
* Variacoes possiveis: topleft topright bottomright bottomleft;
*/
#teste1 {
-moz-border-radius:10px;
background:lightgreen;
border:1px solid green;
}
#teste2 {
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
border:1px solid #00f;
background:lightblue;
}
#teste3 {
-moz-border-radius-topright:50px;
-moz-border-radius-bottomleft:50px;
border:1px solid #f00;
background:pink;
}
#teste4 {
-moz-border-radius-topleft:50px;
-moz-border-radius-bottomleft:50px;
border:1px solid #fc0;
background:#fffea1;
}
Com apenas 4 linhas eu fiz 4 variações de cantos arredondados que hoje da um trabalhão pra fazer de outra maneira. Veja o exemplo (só funciona no firefox): http://www.diegoholiveira.com/blog/wp-content/uploads/2008/12/cantos_arredondados_firefox.html
Como eu achei o tema muito interessante decidi procurar na W3C documentação sobre, e acabei vendo que na especificação da CSS 3 tem essa mesma propriedade, mas lá chamada de “border-radius”, quem quiser ver mais: http://www.w3.org/TR/css3-background/#the-border-radius
Agora vem aquela pergunta que não quer calar: Quando os navegadores começaram a implementar as especificações da CSS 3?
Espero que essa nova guerra dos navegadores (Chrome, Firefox, Opera, Safari e IE) acelere um pouco as coisas.
Referência: https://developer.mozilla.org/en/CSS/-moz-border-radius
