You Are Here: Home » CSS » 150 Ferramentas úteis CSS e geradores para desenvolvedores

150 Ferramentas úteis CSS e geradores para desenvolvedores

150  Ferramentas úteis CSS e geradores para desenvolvedores

Ferramentas de CSS são essenciais para desenvolvedores web, pois atuam como uma espécie de lâmpada mágica que pode simplificar o trabalho na mão. A maioria das ferramentas de desenvolvimento são poupadores de tempo que estão lá para ajudar os desenvolvedores a criar sites elegantes e funcionais e otimizado com alguns atalhos.

Ferramentas CSS e geradores estão disponíveis em números tão grandes que um desenvolvedor pode escolher entre uma variedade deles para fazer seus projetos mais suave. Aqui é a coleção de cerca de 50 ferramentas CSS úteis e acessível e geradores que todo desenvolvedor deveria saber. Divirta-se!

Cores Ferramentas CSS

Designer esquema de cores
Esta ferramenta fornece cores na forma de uma roda de cores que oferece mono, complemento, TRAID, tétrade, analógica e acentuadas variações de cor analógicas na relação percentual, e também destaca o mesmo com o programa adequado escolhido.

Screenshot

Final CSS Generator Gradiente
É um editor de gradiente CSS e gerador que permite criar gradientes com CSS cross-browser suporte.

Screenshot

Códigos de cores CSS
Esta ferramenta oferece duas opções para hexadecimal mobiliário e códigos de cores RGB.Você pode escolher a cor no seletor de cores e depois copiar o seu valor hexadecimal do campo inferior.

Screenshot

Cores Pallete Generator
Esta é uma ferramenta poderosa que gera uma paleta de cores derivadas das cores primárias da imagem que você faz o upload. É uma ferramenta útil para rapidamente pegando uma cor específica dentro de uma imagem de inspiração. Com isso, você também pode gerar amostras de Photoshop e estilos CSS.

Screenshot

Cores CSS
Esta cartela de cores oferece mais de 16 milhões de cores com RGB e modos de cores hexadecimais.

Screenshot

Gradient Image Maker
Esta ferramenta permite que você facilmente gerar uma imagem gradiente de 3 tipos de visualização no local. Com esta ferramenta você pode criar imagens de gradiente que você pode usar em qualquer lugar na sua página web design.

Screenshot

Layouts Ferramentas CSS

templatr
É um gerador de modelo que permite criar modelos bonitos para seu blog e web design sem necessidade de qualquer conhecimento de HTML e CSS.

Screenshot

Free CSS Template Code Generator
É um HTML livre – CSS gerador modelo que gera um layout de três colunas sem usar tabelas.Este gerador de modelo produz um modelo feito por medida, que pode ser usado para controlar o aspecto e sensação de um Web site completo.

Screenshot

Firdamatic: a ferramenta de projeto para os bloggers não inspirados
Este gerador de layout tableless permite que você facilmente criar e personalizar layouts, basta preencher um formulário.

Screenshot

CSS layout Gerador – CSS Portal
Outro gerador de layout com o qual você pode criar um layout de coluna de fluido ou de largura fixa, com até 3 colunas, cabeçalho, rodapé e menu.

Screenshot

CSS layout Gerador de
outro gerador de layout CSS que permite que você crie seu próprio modelo usando HTML e CSS. Você pode criar um modelo com até 3 colunas e um cabeçalho e rodapé.

Screenshot

Gerador de layout
Esta ferramenta gera layouts de várias colunas e grid com as técnicas CSS 2.0 usando pixels, percentuais ou in.

Screenshot

Gerador de layout CSS
Com esta ferramenta, você pode modificar o cabeçalho, rodapé, barras laterais e largura do layout e pode definir o tipo de documento como HTML ou XHTML estrito ou de transição para ver a visualização na mesma página.

Screenshot

YAML Builder
Esta ferramenta é projetada para o desenvolvimento visual de layouts baseados em CSS YAML.

Screenshot

CSS Grids Ferramentas

O 1KB CSS Grade
É uma ferramenta leve, com o qual você pode simplificar modelos de páginas para sistemas de gerenciamento de conteúdo.

Screenshot

Sistema de Grade variável
É uma maneira rápida para gerar uma grade CSS subjacente que é baseado no sistema de grade 960.

Screenshot

GRIDINATOR
Esta ferramenta permite que você gere as redes para o Grid, 960.gs de Ouro, ou Grelha 1KB.Você pode até mesmo gerar uma grade básica genérica.

Screenshot

Blueprint Grade Gerador de CSS
Com esta ferramenta, você pode gerar versões mais flexíveis de grid.cs Blueprint e os compressed.css e arquivos grid.png.

Screenshot

CSS Grade Calculator
Esta calculadora permite visualizar layouts de página e desenhar redes em uma variedade de maneiras. Você pode ter um feedback preciso visual como blocos de texto e divisões de páginas aparecerão dentro de uma janela do navegador. Você também pode retornar declarações de estilo para as divisões e texto para copiar e colar em folhas de estilo.

Screenshot

Designer grade
Esta ferramenta permite criar grades de design, dando-lhe opções para personalizar colunas, pixels, calhas e margens.

Screenshot

Em Calculadora
Em Calculadora é uma ferramenta de JavaScript que permite criar escalável e acessível design CSS. Esta ferramenta converte pixels para suas unidades relativas in com base em um tamanho do texto.

Screenshot

Menus CSS e botões

CSS Menu Maker
Esta ferramenta permite-lhe criar personalizadas, cross-browser menus do site compatíveis.

Screenshot

CSS Gerador de Menu
Este gerador menu permite gerar códigos CSS e HTML que você precisa para criar um conjunto atraente de botões de navegação baseados em texto.

Screenshot

Meu Menu CSS
Esta ferramenta fornece uma maneira fácil de criar menus compatíveis com vários navegadores CSS. Com esta ferramenta, você pode criar Horizontal, Vertical, navegação web drop-down.

Screenshot

Tabs Generator
Outro gerador de CSS Menu de navegação Tab que permite ajustar tamanho, cores, cantos e muito mais para gerar projetos originais que pode ser baixado para seu uso.

Screenshot

List-O-Matic
Com esta ferramenta, você pode escolher o conteúdo, layout e apresentação de seus menus de navegação baseados em lista.

Screenshot

On-line Button Maker
Esta ferramenta cria XHTML botões micro (80 × 15). Você também pode criar maior 88 × 31 botões.

Screenshot

CSS Button & Campo de texto Generator
Essa ferramenta é um botão CSS e gerador de campo de texto que permite criar facilmente com apenas um clique do mouse.

Screenshot

Fontes e ferramentas de texto CSS

Fonttester
Esta é uma excelente ferramenta que permite editar um monte de propriedades CSS incluindo altura inline, peso da fonte, estilo da fonte e variante, texto travessão e transformar, e da palavra e espaçamento de letras.

Screenshot

CSS estilo da fonte
Você pode usar esta ferramenta para definir o estilo da fonte para itálico ou oblíquo.

Screenshot

Typetester
aplicação Este fornece uma comparação das fontes para o ecrã. Desde que as novas fontes são embalados em sistemas operacionais, a lista das fontes comuns serão atualizados.

Screenshot

CSS Font e Assistente de estilo de texto
Você pode usar este assistente se você quiser experimentar com as fontes e estilos de texto, a fim de gerar o código fonte de amostra CSS estilo. HTML dinâmico é utilizado na presente assistente que altera o estilo da tabela in-situ, sem carregar outra página.

Screenshot

CSS Tipo Definir
Esta é uma ferramenta de tipografia que permite aos designers e desenvolvedores para testar e aprender os caminhos para seu estilo de conteúdo web.

Screenshot

CSS Generator & Optimizer

CSS Generator
Essa ferramenta permite que você escolha um estilo para a sua página web. Você pode selecionar diferentes propriedades em cascata folha de estilo com visualização ao vivo. Você pode escolher a cor, tag HTML, clique no campo que você gostaria de inserir cor dentro e colori-los.

Screenshot

CSS Generator
Essa ferramenta dá-lhe uma visualização ao vivo da cor que você selecione a partir da paleta.Você pode especificar diretamente as cores e os atributos de design de outros. Esta ferramenta ajuda você a escolher uma cor para o seu rosto novo projeto web de imediato!

Screenshot

Cascading Style Sheet CSS Generator
Esta é uma ferramenta gratuita que permite criar folhas de estilo em cascata para a sua página web. Você pode adicionar como folhas de estilo que quiser.

Screenshot

quickCSS – Online-CSS Gerador-
Com esta ferramenta, você pode gerar CSS com apenas um clique.

Screenshot

Corners Spiffy – puramente CSS cantos arredondados
É uma ferramenta simples para gerar o CSS e HTML necessário para gerar anti-aliased cantos sem usar imagens ou javascript.

Screenshot

Limpo CSS
Este é um otimizador de CSS e formatador que leva o seu código CSS e torna mais limpa e concisa.

Screenshot

CSS simples
Esta ferramenta permite criar folhas de estilo em cascata a partir do zero únicas. Você também pode modificar o seu CSS existente.

Screenshot

Padrões para CSS Regex Linha Única
Ao formatar a sua folha de estilo CSS com uma única linha, você pode encontrar macro Textmate Dan Rubin útil se você o seu grupo governante e adicionar espaços em branco que faz a varredura através da página web mais fácil. Você também pode usar uma expressão regular, se você não quiser usar Textmate.

Screenshot

CSS Sprite Ferramentas

CSS – Sprit.es
Com esta ferramenta, você pode facilmente gerar o código CSS e HTML fazendo o upload do arquivo que você deseja usar em seu sprite CSS e, em seguida, clique no botão que juntar todas as suas imagens em um único arquivo. Com esta ferramenta, você também pode conseguir todos os efeitos de sobreposição.

Screenshot

Spritegen CSS Sprites
Esta ferramenta permite que você crie seu sprite, deixando o seu upload de sua imagem e, em seguida, adicionar mais imagens. Você também pode definir a saída de suas imagens como PNG, JPEG ou GIF.

Screenshot

CSS Sprites
Com esta ferramenta, fazer upload de qualquer número de imagens e clique em Gerar botão para criar sprites seu CSS com facilidade.

Screenshot

Desempenho website (CSS Sprite Generator)
é uma ferramenta que permite que você carregue seu arquivo de origem, a fim de criar a imagem do sprite e CSS. Esta ferramenta funciona ignorando o redimensionamento duplicatas, as imagens de origem, a definição das opções de sprites e outras CSS como horizontal e deslocamento vertical, cor de fundo, o prefixo de classe, sufixo CSS etc

Screenshot

Spritebox
É uma ferramenta WYSIWYG que é útil para os web designers que querem criar rapidamente classes CSS e identificações de uma imagem do sprite único. Esta ferramenta trabalha com o princípio de usar a propriedade background-position para alinhar as áreas de uma imagem do sprite em elementos de bloco de uma página web.

Screenshot

Outras ferramentas de CSS

SlickMap CSS
Esta ferramenta exibe mapas do seu site diretamente de navegação HTML lista não ordenada.Isto é apropriado para os sites que querem acomodar até três níveis de navegação de página e links de utilidade extras que podem ser facilmente modificados para atender às necessidades pessoais, branding, ou preferências de estilo.

Screenshot

CSS3 por favor!
Esta ferramenta exibe a saída do seu código instantaneamente. É uma ferramenta simples e poderosa para os web designers e desenvolvedores.

Screenshot

CSS Sorter
Classificador CSS é uma ferramenta que classifica os arquivos CSS e regras em ordem alfabética para que você possa facilmente gerenciar seus arquivos CSS.

Screenshot

Sky Ferramenta CSS
Sky CSS permite criar classes CSS sem exigir nenhum código manuscrito. Para funcionar corretamente, ele precisa de um navegador compatível com JavaScript.

Screenshot

CSS Assistente de Tabela
Este assistente lhe ajuda a gerar o código-fonte estilo e permite que você faça experiências com estilos de borda da tabela.

Screenshot

Csstxt
Csstxt é uma poderosa ferramenta que ilustra várias maneiras de adicionar um estilo a um texto com ‘a’, ‘p’ ou tag div.

Screenshot

MinifyMe
É uma aplicação AIR pequena que embala juntos vários arquivos CSS e JavaScript em um único e funciona em seu desktop.

Screenshot

Password Generator
Essa ferramenta gera todos os códigos obrigatórios requeridos para proteger com senha um diretório, ou seleciona os arquivos dentro dela em seu site por meio de. htaccess. Esta ferramenta funciona criptografando a senha desejada e em seguida, colocar os resultados dentro do seu. Htaccess e htpasswd. Arquivos.

Screenshot

XHTML / CSS Markup Generator
Esta é uma ferramenta simples que lhe permite gerar rapidamente marcação XHTML e CSS de um quadro; encurtar a sintaxe para que você possa saltar directamente para o estilo elementos. Esta ferramenta acelera significativamente o seu trabalho.

Screenshot

 

Deixe seu comentário sobre esté Post do Blog

Comente a Publicação

Sobre o Autor da Publicação

avatar
Web Designer.

Jeferson Azevedo é Co-Founder/CEO de uma jovem empresa de webdesign e comunicação a Site Para Empresas ,

Número de inscritos em nosso Blog. : 875

© 2013 Site Para Empresas Blog sobre Internet desenvolvimento e Midias Sociais. - Fones: (11) 4063-4055 - 2361-4762