Gerador Codigos Online_W2008 9/22/10 5:13 PM Page 64
Programação CSS 3
CSS 3: Gerador de códigos online Confira teste em primeira mão do sistema criado para auxiliar os desenvolvedores no uso da nova versão das folhas de estilo em cascata Por Yan Borowski
S
e você trabalha com desenvolvimento de páginas para internet, já deve ter ouvido falar sobre o tal CSS (Cascade Style Sheets ou, simplesmente, folhas de estilo em cascata). A Locaweb em Revista testou um sistema online de geração de códigos CSS3 chamado CSS3 Generator (http://css3generator.com), criado por Randy Jensen (@randyjensen, no Twitter). Ele auxilia desenvolvedores com a utilização da nova versão do CSS, que está sendo implementada nos navegadores mais atuais. Algumas funcionalidades rodam em versões um pouco mais antigas, outras somente em versões mais novas.
usuário escolhe que tipo de estilo deseja utilizar. Feita a opção, o sistema mostra algumas opções de configuração do estilo escolhido (o ângulo de rotação, bordas). Existem algumas funcionalidades que não foram implementadas, porém o Randy as adicionou na listagem. Quando você seleciona algumas delas, ele deixa algumas dicas de outros locais que podem ser consultados para utilização desse recurso do CSS3, como é o caso dos seletores (Selectors) e dos gradientes (Gradients). Isso porque não precisamos reinventar a roda quando existe algo tão bom para utilização, sem custo, no mercado. Observando a figura no rodapé da página, podemos ter uma visão geral de como o sistema funciona:
1 Caixa de seleção onde o usuário escolhe o tipo de estilo que deseja usar;
Visão geral O CSS3 Generator é 100% online. É um site bem usual; não tem nenhum esquema de navegação de outro mundo, como Marte ou outros planetas. O sistema todo é baseado na utilização de uma caixa de seleção na qual o
2 Área onde são informadas as configurações que o estilo deve conter. Cada estilo precisa de configurações distintas para que sua apresentação seja gerada; 3 Código CSS gerado pelo sistema baseado nas configurações informadas;
1 2
5 3 4
6
4 Navegadores compatíveis com o estilo; 5 Versões do navegador compatíveis com o tipo de estilo selecionado; 6 Área de pré-visualização do efeito gerado pelo código configurado.
Bordas arredondadas Quase todo programador já recebeu um layout da equipe de design com alguns painéis com 64 locaweb