• Tweet
• Email

• Tweet
• Email

Aqui serão expostas 40 ferramentas CSS extremamente úteis, recursos, templates entre outros. Não serão incluídas ferramentas tradicionais como Firebug ou Web Developer, pois tentaremos focar em ferramentas desconhecidas mas que definitivamente são merecedoras de serem expostas. Algumas são mais novas, outras mais velhas, mas certamente que irá encontrar uma mão cheia de ferramentas que lhe irão ser muito úteis para o seu trabalho. Confirme!

CSS e Tipografia

1. HYPHENATOR

Hyphenator.js traz-nos divisão silábica de documentos HTML a qualquer browser inserindo pequenos hífens usando o algoritmo de hifenização de Frank M. Liang, também conhecido como OpenOffice e LaTeX.
Exemplo: Co\-nhe\-ci\-men\-to

2. CSS TYPE SET

CSS Type Set é uma ferramenta de tipografia que permite aos designers e programadores testar e aprender a estilizar os seus conteúdos.

3. CSS-TYPOSET MATRIX AND CODE GENERATOR

Uma tabela matriz que tem os tamanhos dos tipos de letra e margens standard dos vários tipos de letra, em pixeis e unidades.

4. EM CALCULATOR

Em Calculator é uma ferramenta JavaScript que o ajuda a criar design CSS acessível. Converte tamanhos de pixeis para unidades, que são dados com base num tamanho de texto.

Ferramentas CSS Online

5. PSD2CSS ONLINE

Um serviço online que gera páginas web através de designs de Photoshop

6. CONDITIONAL-CSS

Permite-lhe escrever CSS com condições lógicas para argumentos CSS específicos para browsers individuais e grupos de browsers.

7. MORE CSS

MoreCSS é uma biblioteca JavaScript orientada para design que permite escrever código para aplicar divisão de sílabas automaticamente e criar pop-ups, dicas, menus, entre outros.

8. PX TO EM

Esta ferramenta é aquilo a que os programadores chamam de “PX para EM tornado simples”. Escreva um tipo de letra em pixeis, e esta ferramente irá produzir uma tabela de conversão de px para em, tornando o Web design mais fácil de produzir.

9. CSS REDUNDANCY CHECKER

Pode utilizar esta ferramenta para encontrar atributos CSS que não estejam a ser utilizados e assim poder eliminá-los por forma a evitar redundâncias.

10. WORD OFF

WordOff aplica algumas regras para limitar o que é copiado para os editores WYSIWYG do Word. Por exemplo, atributos são removidos a todos os elementos com excepção de <a>, <span> e <div>, elementos vazios são removidos e consecutivamente as linhas de quebra são reduzidas.

11. KOTATSU

Kotatsu é um criador de tabelas. Permite-lhe atribuir classes a células na mesma coluna facilmente.

12. HTML DEVELOPER TOOLS

Esta ferramenta permite-lhe actualizar os ficheiros CSS que estão no servidor através janela do browser.

13. DEPLOY

Deploy é uma aplicação Open Source que permite-lhe escolher o noe de um projecto, o Doctype, se quer um reset ao CSS ou integração JQuery, e cria um ficheiro zip pronto a usar com todos os ficheiros e pastas escolhidos. Foi optimizada para uso com o Fluid.

14. CSS EVOLVE

Permite-lhe alterar muitas propriedades de um website, incluindo o esquema de cores, tipos de letra e outros.

15. SELECT ORACLE

Um pequeno script que explica os selectores CSS em Inglês ou Espanhol. É particularmente útil para selectores CSS3.

16. CSS TEXT WRAPPER

O CSS Text Wrapper permite-lhe modelar texto em formas, como circulos, zig zag, ou qualquer outro que pretenda.

17. CSS SPRITE GENERATOR

Com esta ferramenta, pode enviar todas as imagens (tem de as colocar num ficheiro .zip) e vai criar o CSS automaticamente com as imagens enviada.

18. SKY CSS TOOL

Uma ferramenta de autoria CSS online, que lhe permite criar classes CSS praticamente sem ter de criar código à mão. Para o correcto funcionamento, é necessário um browser compatível com JavaScript.

19. CSS TIDY ONLINE

É uma versão online do CSS Tidy, uma ferramenta que através da compressão de código, permite manter o código limpo.

20. GRID DESIGNER 2.4

Grid Designer permite-lhe criar uma tabela, especificando o número de colunas, calhas e margens. Também permite escolher a tipografia e exportar o resultado final.

21. YAHOO’S SECRET TEXT-SPRITE GENERATOR

É um website onde pode digitar texto que será convertido numa imagem PNG automaticamente. Basta alterar o texto que vem a seguir a “…/headline?txt=”

Kits úteis para design com CSS

22. EXCELLENT DREAMWEAVER EXTENSIONS FOR CSS PRODUCTIVITY AND STANDARDS

Uma compilação de 21 extensões para Dreamweaver, para optimizar o seu trabalho e tirar o melhor partido do Dreamweaver.

23. GRAPH PAPER

É feito para designers virtuais, designers e arquitectos de informação. Contém vários estilos, como storyboarding, wireframing entre outros.

24. STARTER KIT FOR DEVELOPERS

Este kit de iniciação é um modelo Photoshop gratuito, o qual inclui elementos de design, formas, tabelas e espaços reservados para publicidade.

Ferramentas CSS de Browser: Extensões Firefox

25. DUST-ME SELECTORS

É uma extensão que detecta selectores CSS não utilizados, permitindo-lhe simplificar o CSS.

26. AARDVARK FIREFOX EXTENSION

Com Aardvark irá conseguir limpar banners indesejados e zonas envolventes que não são necessárias, antes de imprimir uma pagina.

27. CSS VIEWER

É um visualizador de propriedades CSS que lhe fornece todas as informações sobre um determinado elemento de design.

28. DUMMY LIPSUM

Preenche dinamicamente uma área seleccionad com texto Lorem Ipsum.

29. GRID FOX

É uma extensão para Firefox que lhe permite criar uma grelha sobre qualquer website, permitindo-lhe personalizar e criar uma grelha que vá de acordo com o seu layout.

Programando com CSS

30. EDIT IN PLACE WITH JAVASCRIPT AND CSS

Esta ferramenta fornece-lhe a edição mais intuitiva dos seus documentos e folhas de estilo.

31. SIMPLE CSS

Simple CSS é um editor CSS gratuito compatível com Mac, Windows e Linux. Permite-lhe criar CSS apartir do zero e modificar folhas de estilo existentes, utilizando uma interface familiar.

Bookmarklets CSS

32. DESIGN BOOKMARKLET

É um conjunto de ferramentas JavaScript de desenvolvimento de produto que podem ser usados em qualquer página Web. Engloba utilitários para layout da grelha, medição e alinhamento.

33. RECSS: RELOAD YOUR CSS

Este bookmarklet torna o processo de re-estruturar o CSS uma coisa simples. É muito útil no desenvolvimento de aplicativos dinâmicos. Para Internet Explorer e Firefox.

34. XRAY

Para Internet Explorer, Webkit, Safari, Firefox, Camino e Mozilla, este bookmarklet permite-lhe visualizar a caixa modelo de qualquer elemento de uma página.

Ferramentas para criar Layouts CSS

35. CONSTRUCT YOUR CSS

Um editor visual de layout baseado em Blueprint e jQuery. Há um video tutorial disponível aqui.

36. iSTYLER – ONLINE CSS TEMPLATE GENERATOR

É um editor CSS WYSIWIG online avançado com destaque se sintaxe, funcionalidade drag’n'drop, opção de partilha stylesheet e uma árvore DOM visual.

Layouts CSS limpos

37. THE ONLY CSS LAYOUT YOU NEED

Uma colecção de layouts básicos.

38. FIXED WIDTH CSS LAYOUTS

Um total de 53 layouts de largura fixa para download.

39. FAUX-COLUMN CSS LAYOUTS

Um total de 42 layouts CSS de coluna “falsa” para download.

40. LAYOUTS

Oferece modelos com pré largura de página, largura fixa ou texto “zoom” com efeito de escala, e dois modelos que estao subdivididos em regiões de uma a quatro colunas.

Até já!