Warning: Missing argument 2 for wpdb::prepare(), called in /home/wwwpont/public_html/wp-content/plugins/sharebar/sharebar.php on line 112 and defined in /home/wwwpont/public_html/wp-includes/wp-db.php on line 992

Warning: Missing argument 2 for wpdb::prepare(), called in /home/wwwpont/public_html/wp-content/plugins/sharebar/sharebar.php on line 124 and defined in /home/wwwpont/public_html/wp-includes/wp-db.php on line 992

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á!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

Templates Incríveis para seus Projetos:

  • Jackman - A minimal personal blog for Jekyll
  • Akin - Creative One Page Joomla Template
  • The Grid - Fully Responsive Drupal 7 Theme
  • SAGA - Simple One Page Portfolio Joomla Template
  • Casanova - Responsive Multi-Purpose Drupal Theme
  • Yamato - Responsive Marketing Joomla Template
  • Rosania - Multipurpose Joomla Responsive Templates
  • Flatdown - Coming Soon MODX Theme
  • Noo Capulus - A Multi Purposes Coffee Style Theme
  • Plussone - Joomla Business Template
  • The Air - Follow the property line
  • Greenwich Village – Responsive Drupal One-Page

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jonathan [JCM]
    19 de outubro de 2010

    Ótimas ferramentas, vou deixar aqui um site que acho muito bom e prático, ele gera códigos para usar o atributo gradient do CSS3: http://gradients.glrzad.com/

    Responder


  2. Cristiano
    13 de fevereiro de 2011

    Parece-me bastante interessante e pertinentes as ferramente faladas para CSS.

    São interessantes algumas delas pois nunca tinha ouvido falar como é o caso do PSD2CSS ONLINE ou EXCELLENT DREAMWEAVER EXTENSIONS FOR CSS PRODUCTIVITY AND STANDARDS.

    Fantástico artigo, como já vem sendo habitual.

    Cumprimentos,
    Cristiano Perdigão

    Responder


  3. Gigaconteudo
    28 de janeiro de 2012

    Excelente lista de ferramentas, não conhecia boa parte delas. Já guardei nos favoritos para otimizações futuras.

    Abraço.

    Responder


  4. Gustavo Sapienza
    24 de maio de 2012

    Muito interessante este artigo, algumas ferramentas eu já conhecia, outras eu vou instalar e testar, quem sabe não otimiza meu tempo né?

    Responder

Comente o Artigo!

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7598

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz