Olá, pessoal

Inaugurando outra seção do blog, falarei aqui de diversas ferramentas úteis voltadas para o CSS (de preferência, gratuitas) que servirão de suporte tanto para programadores quanto para designers web.

E para começar, separei 5 destas ferramentas que não podem ficar de fora dos “favoritos” do nosso navegador, não é verdade ;)

1 – CSS Type Set

Você que está iniciando no CSS ou esqueceu algum atributo, classe de texto da linguagem, esta é uma excelente ferramenta. Você digita o texto na caixa esquerda; abaixo você escolhe tipo de fonte, tamanho, cores, espaçamentos e, à direita, a formatação do CSS é visualizada instantaneamente.

CSS Type Set - Editor CSS online

2 – CSS Sprites Generator

Lembram do tutorial Como Criar um Topo de Site com Menu CSS: Parte 2, onde falei e mostrei esta técnica utilizando somente uma imagem? Uma das maiores dificuldades é saber identificar corretamente o posicionamento de cada item em uma única imagem. Com esta ferramenta, os problemas acabaram :)

Se exportarmos os ícones, um a um, e inserirmos nesta aplicação, ela, além de criar uma imagem única, ainda por cima cria o código css “background-position” para cada um, o que facilita surpreendentemente o processo. Sem falar que podemos baixar o arquivo final e visualizar o resultado. Este eu recomendo demais.

CSS Sprites Generator - Gerador Online CSS  Sprites

3 – Button Maker Online

Utilize esta ferramenta online para criar facilmente e visualmente os botões popularmente conhecidos como “XHTML” micro (80×15). Você também pode optar pelo maior botão 88×31 pixel. Confira!

Button Maker Online - Ferramenta de Criação de Botão Online CSS

4 – Ribbon Rules Generator

Vocês já viram que o novo CarlosHPS Blog tem como imagem de fundo, linhas baseadas no tom de roxo? Pois então, com a Web 2.o as “Ribbon Rules”, que são essas linhas, vieram para ficar. Esta ferramenta cria, baseado em um ou mais cores, a imagem e o código CSS que servirá para inserir esta técnica em seus projetos web.

Ribbon Rules Generator

5 – CSS Compressor

Use esse utilitário para comprimir o seu CSS, aumentar a velocidade de carregamento e economizar largura de banda também. Você pode escolher entre três níveis de compressão, dependendo de como você deseja que o CSS comprimido fique legível por conta do grau de compressão. O modo “Normal” deve funcionar bem na maioria dos casos, criando um bom equilíbrio entre os dois.

CSS Compressor - Reduz o tamanho do arquivo CSS

Até a próxima, pessoal.

CarlosHPS Webdesigner 8)

Blog Widget by LinkWithin