Recopilación de herramientas gratuitas para el desarrollo de nuestras hojas de estilo CSS y diversos elementos HTML basados en ellas. Incluimos utilidades para manejo de color, fuentes, tipografía, generadores de sprites, generadores y optimizadores de código, etc, etc.Seguiremos incluyendo utilidades en nuestro repositorios de recursos web…

COLORES

• Permite subir un fichero CSS, modificar los colores y descargarlo modificado a nuestro gusto - http://css-color-replace.orca-multimedia.de/
• Ribbon Rules Generator (Permite colorear reglas horizontales con CSS) – http://tools.dynamicdrive.com/ribbon/

BOTONES

• Generador de microbotones (80×15) – http://tools.dynamicdrive.com/button/

FUENTES Y TIPOGRAFÍA

• Generador de fuentes CSS – http://csstypeset.com/
• Previsualizador de fuentes – http://www.typechart.com/
• Matriz y generador de código para tipografía – http://www.jan-quickels.de/tools-web-typography/
• Conversor de tamaños de texto en pixeles (px) a unidades relativas (em) – http://riddle.pl/emcalc/
• Otro conversor de unidades absolutas a relativas - http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/
• PX to EM – http://pxtoem.com/

GENERADORES DE GRIDS

• Grid Designer – http://grid.mindplay.dk
• YUI (Constructor de grids con CSS) – http://developer.yahoo.com/yui/grids/builder/

GENERADORES DE SPRITES CSS

Los sprites CSS son una manera de reducir el número de llamadas HTTP realizadas por los recursos de imagen referenciados de tu sitio web. Las imágenes se combinan en una única gran imagen con coordenadas X e Y definidas. Teniendo asignada la imagen generada a los elementos de página necesarios, la propiedad CSS background-position puede usarse para hacer visible el área requerida de la imagen sprite.

Esta técnica puede ser muy efectiva para mejorar el rendimiento, particularmente en situaciones dónde se utilizan muchas imágenes pequeñas (como iconos de menú). La página inicial de Yahoo!, por ejemplo, utiliza esta técnica exactamente para eso.

• http://es.spritegen.website-performance.org/
• http://www.csssprites.com/

VALIDADORES

• Validador de CSS del W3C – http://jigsaw.w3.org/css-validator/

COMPRESORES

• CSS Drive – http://www.cssdrive.com/index.php/main/csscompressor/
• Compresor de Mabblog – http://mabblog.com/cssoptimizer/compress.html

GENERADORES DE CÓDIGO CSS

• Simple CSS (Generador de código CSS) – http://www.hostm.com/css/
• CSS Generator – http://csscreator.com/?q=version1/index.php
• PSD2CSS (generador de CSS desde PSD) – http://psd2cssonline.com/
• Clear CSS Generator – http://matrixsoftware.virtualave.net/
• Conditional CSS – http://www.conditional-css.com/
• CSS Creator – http://csscreator.com/?q=tools/layout
• More CSS (librería Javascript que genera código CSS con funcionalidades gráficas avanzadas) – http://yellowgreen.de/morecss
• Quick CSS -http://www.xmldir.de/quickcss/
• QrONE CSS Designer - http://www.qrone.org/cssdesigner.html
• Sky CSS Tool – http://skycsstool.sourceforge.net/

FORMATEADORES Y OPTIMIZADORES DE CSS

• Basado en csstidy 1.3 – http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en
• Depurador de CSS – http://isnoop.net/tools/css.php
• Firebug (plugin de Firefox) – http://getfirebug.com/
• CSS Redundancy Checker - http://services.immike.net/css-checker/
• CSSEvolve (CSS alternativos de una página) – http://iterationprojects.com/evolve/
• CSS Text Wrapper – http://www.csstextwrap.com/
• SelectOracle (explicación de selectores CSS) - http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

GENERADORES DE ELEMENTOS HTML

• Botones y cajas de texto – http://www.devdude.com/tools/css/button_text/
• Generador de capas de cssportal – http://www.cssportal.com/generators/layout.htm
• Generador de textos que rodean imágenes con formas mediante el uso de CSS y XHTML - http://www.theboxoffice.be/
• CSS Template Generator – http://www.ibdjohn.com/csstemplate/
• HTML and CSS Table Border Style Wizard – http://somacon.com/p141.php
• List-O-Matic – http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/
• JotForm (Generador de formularios) – http://www.jotform.com/
• The Generator Form (creador de páginas divididas en columnas) – http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
• Style Sheet (Generador de plantillas PHP – HTML – CSS) – http://www.maketemplate.com/

GENERADORES DE MENÚS DE NAVEGACIÓN

• CSS Menu Generator - http://www.webmaster-toolkit.com/css-menu-generator.shtml

CSS3

• css3please.com – Generador de propiedades CSS3 crossbrowser

Guías de referencia rápida

• Guía de referencia rápida de CSS 3 en PDF
• Guía de referencia rápida de CSS 2.1 en PDF

Otras páginas de Herramientas:

• Frameworks de desarrollo web gratis
  • Frameworks de desarrollo web en Javascript
  • Frameworks de desarrollo web en PHP
  • Frameworks de desarrollo web para CSS
• Herramientas de diseño web para Apple
  • Herramientas de diseño web para iPhone
• CSS: Herramientas para diseño web
• Herramientas SEO
  • Herramientas para análisis del trafico de una web
  • Herramientas para analizar backlinks
  • Herramientas para dominios: nombres, registro, busqueda, etc.
    • Herramientas para nombres de dominios
    • Herramientas para obtener información de dominios
  • Herramientas para hacer Whois
  • Herramientas para localizar backlinks
• jQuery: herramientas y ejemplos
• Herramientas para diseño, desarrollo web, seo, optmizacion, etc
• Wireframing y prototipos para diseño web