CSS3 Generator

Desenvolvedores recorrem às propriedades do CSS para trabalhar com agradáveis efeitos em textos e caixas exibidos em páginas da web. Este simples gerador de códigos CSS3 ajuda tais desenvolvedores a ganhar tempo na hora de programar e a surpreender os visitantes da página.

CSS3 Generator permite que você configure bordas (border-radius), sombras, gradiente e opacidade. Cada um desses parâmetros tem configurações detalhadas, como a possibilidade de definir valores border-radius para cada canto.

É fácil utilizar o CSS3 Generator (claro, fácil para quem conhece as propriedades do CSS3). O botão “edit the basics” permite configurar os aspectos básicos do objeto (cor de borda e de fundo). Ao clicá-lo, ele se expande, e é necessário mantê-lo aberto a fim de obter as alterações no código.

“Border-radius” é um nivelador de 0 a 50. Quanto mais alto o número, mais arredondadas ficam as bordas. Já “box-shadow” personaliza o efeito de sombra. O nivelador vai de 0 a 20 — quanto maior, mais espessa é a sombra.

“Background gradient”, quando habilitado, aplica efeito degradê. É possível determinar o sentido do efeito, de onde ele parte e até onde vai. Por último, o nivelador de opacidade vai de 0 a 100 para definir a transparência do objeto.

Tudo o que é configurado é acompanhado instantaneamente na janela de pré-visualização que fica à direita dos niveladores.

Nem todos os navegadores suportam o CSS3. Por isso, o CSS3 Generator oferece a possibilidade de ajustar o código para navegadores antigos, como Internet Explorer 7 e 8. Basta ativar a opção “Minimal Internet Explorer 7 & 8 Support”, logo abaixo da janela de pré-visualização.

Com tudo configurado, clique em “Get the code!”. Ele é exibido em uma janela separada, bastando copiá-lo para utilizá-lo.