10 Utilidades CSS que todo desarrollador y diseñador web deben conocer

noviembre 1, 2011

Para cualquier diseñador o desarrollador web el tiempo que tome desarrollar un sitio web siempre es un gran tema, y nada mejor para optimizar el tiempo que valerse de herramientas que nos permitan automatizar ciertas tareas y así avanzar mucho más rápido en lo que sería crear un menú con css, crear sprites de imágenes, o revisar si los colores usados son los más adecuados.

La siguiente es una lista de 10 utilidades online para automatizar ciertas tareas que de otra forma nos demorarían, que nos permiten ahorrar tiempo y aprovecharlo solucionando otros problemas:

1. Color Schemer Designer – Paleta de colores


Esta es una muy buena utilidad, similar a Colorblender o a Color Palette Software, pero con la diferencia que es un poco más completo, pues muestra una paleta de colores circular, como el círculo cromático, donde se pueden seleccionar los colores cálidos o fríos, además activar la opción de visualizar los colores complementarios, análogos, ver el código hexadecimal, rgb, exportar la paleta de colores a un archivo de texto, y hasta ver un ejemplo de uso de los colores en un sitio web de pruebas. En pocas palabras, una excelente utilidad.

2. My Css Menu

Utilidad para crear completos menus en CSS y HTML puro. El sitio presenta varios estilos de menu prefabricados de los cuales, si te gustó uno, puedes personalizarlo a gusto.

3. CSS Layout Creator

Esta utilidad permite crear distintos layouts perfectamente válidos para montar nuestros diseños. Permite personalizar la plantilla totalmente, especificar el ancho total, el alto del header, del contenido, las sidebars y footer.

4. Color Picker

Utilidad que permite conocer de manera fácil y rápida los códigos  hexadecimal y RGB de un color en específico.

5. CSS Menu Maker

Con esta utilidad se pueden crear menus deslizantes, menus horizontales o verticales totalmente compatibles entre navegadores.

6. CSS Type Test

Esta es una excelente utilidad que nos permite visualizar en tiempo real el preformateo de un texto en especifico. Podemos definir la separación entre letras, separación entre palabras, altura de la línea, agregar negritas, cursivas, colores y alineaciones. Todo mediante un editor realmente simple, desde el cual podemos setear todas estas opciones y luego llevarnos el código para aplicarlo en nuestras plantillas.

7. EM Calculator – Calculadora de EM

Esta utilidad nos permite realizar diseños “escalables” y “accesibles”, porque nos permite modificar la unidad de medida de los textos de nuestra plantilla de pixeles a em; así, ingresando el tamaño de texto por defecto de nuestra plantilla nos devuelve su valor en unidades relativas a aquel valor que hemos especificado.

8. Image Color Palette – Paleta de colores en relacion a una imagen

Esta utilidad nos permite subir una imagen desde nuestro pc o especificar la url de una imagen, para que luego nos devuelva una paleta de colores que tiene relación con la imagen en cuestión.

9. Layout Generator


Con esta utilidad es posible generar layouts de 1, 2 o 3 columnas totalmente optimizados para la web 2.0, obteniendo el código en vivo para poder utilizarlo en lo que queramos.

10. CSS Layout Generator

Otra utilidad más para crear layouts de manera fácil y rápida. Permite generar plantillas de ancho fijo o variable, elegir entre dos modos de reset del css por defecto de los navegadores, especificar la cantidad de columnas y especificar el alto y la posicion del footer.