Herramientas CSS para diseño web

Comparto con todos vosotros un recopilatorio que me ha parecido bastante interesante sobre herramientas que nos facilitan el diseño de nuestras hojas de estilo CSS para los diseños webs que realicemos.

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/
• 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/
• Gridinator - http://gridinator.com/

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/
• https://www.toptal.com/developers/css/sprite-generator

VALIDADORES

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

COMPRESORES

• CSS Drive – http://www.cssdrive.com/index.php/main/csscompressor/

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
• Clear CSS Generator – http://matrixsoftware.virtualave.net/
• Conditional CSS – http://www.conditional-css.com/
• CSS Creator – http://csscreator.com/?q=tools/layout
• Quick CSS -http://www.xmldir.de/quickcss/
• Sky CSS Tool – http://skycsstool.sourceforge.net/

FORMATEADORES Y OPTIMIZADORES DE CSS

• Firebug (plugin de Firefox) – http://getfirebug.com/

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
• 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/

CSS3

• css3please.com – Generador de propiedades CSS3 crossbrowser