Esta es una excelente recopilación hecha por Smashing Apps, que contiene 11 herramientas CSS que ayudarán a acelerar el trabajo durante el proceso de diseño de un sitio web.

En esta lista podemos encontrar para crear de menús de navegación, formularios, añadir efectos en texto, compresores de código CSS, etc. A continuación les dejo tres ejemplos:

1. CSS Menu Maker


2. CSS Compressor


3. CSS Text Shadow



Enlace: 11 Useful CSS Tools To Speed Up Your Design Process

Makisu es un experimental y bastante original menú dropdown, el cual puede plegarse y desplegarse con efectos 3D.

El menú utiliza transformaciones 3D de CSS y viene como un plugin de jQuery. Además, dispone de varias opciones de personalización como duración de la animación, color de sombreado, perspectiva utilizada para el menú, etc.

Para los navegadores que no soportan las transformaciones 3D, el menú se despliega sin ningún tipo de efecto. Puedes echar un vistazo a los navegadores que soportan estos efectos en este enlace.

Enlace: Makisu

One% CSS Grid es un sistema de grilla CSS líquida para crear web adaptables de forma fácil; y al estar basado en porcentajes, se adapta perfectamente a todas las resoluciones de pantalla (Desktop, tablets y móviles).

Cuenta con 2 opciones de inicio basados en los tamaños de los puntos de vista de pantalla completa: 1280px y 1024px. Además, utiliza media queries de CSS3, requiriendo javascript para funcionar sin problemas en IE7 e IE8.

También se incluye un archivo PSD con dos acciones, uno para la grilla de 1280px y otro para la de 1024px.

Enlace: One% CSS Grid

CSSHórus es un framework CSS para el desarrollo fácil y rápido de sitios web adaptables a cualquier dispositivo (desktops, tablets y móviles).

El framework trabaja a 16 columnas y cuenta con los estilos básicos para resets, tipografías, tablas, listas, formularios y botones. También tiene soporte para LESS y dispone de dos archivos PSD con layouts de 1200px y 900px para facilitar el diseño.

Además, es cross-browser, siendo compatible con los siguientes navegadores:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

Enlace: CSSHórus
Descarga: https://github.com/firminoweb/csshorus/

CSS FilterLab es una aplicación online gratuita desarrollada por Adobe que nos permite explorar y personalizar filtros CSS.

La aplicación cuenta con una lista de filtros y nos permite aplicar cualquiera de ellos, personalizar sus valores, ver el resultado de la personalización y obtener el código CSS generado.

También permite crear animaciones por fotogramas basado en el uso de los filtros, que pueden guardarse para su uso posterior.

CSS FilterLab también es open source y está disponible GitHub.

Como dato adicional, esta aplicación sólo funciona en navegadores basados en Webkit.

Enlace: CSS FilterLab

Si estás buscando una base para crear un sitio web adaptable a cualquier pantalla (Responsive Design), Kube te puede ser de mucha utilidad.

Kube es un simple archivo CSS con el que podrás comenzar a maquetar un sitio adaptable si muchos dolores de cabeza. Este framework incluye estilos para formularios, grillas, botones, tablas, tipografía, enlaces e imágenes.

Para los desarrolladores que buscan más flexibilidad y personalización, Kube también ofrece una versión en LESS.

Kube es compatible con los siguientes navegadores:

• Internet Explorer 8+
• Chrome
• Firefox
• Safari
• Opera

Enlace: Kube
Demos: Demo 1 | Demo 2

En Cats Who Code ha hecho una interesante recopilación, son 10 generadores online de código CSS3 que permitirán facilitar el trabajo de los desarrolladores front-end.

Por ejemplo, tenemos generadores de botones, degradados, sombras, animaciones, etc. Estos son tres de ellos:

1. CSS3 Generator
Permite generar más de 10 efectos CSS3 como por ejemplo: bordes redondeados, sombras, degradados, transiciones, etc.



2. CSS3 Gradient Generator
Como su nombre lo indica, esta herramienta permite crear degradados de forma fácil y rápida.


3. @Font-face Generator
Esta excelente herramienta nos ayuda a utilizar cualquier fuente en nuestra página, basta con subir la tipografía que se desee utilizar y la aplicación nos devolverá esta misma fuente en los distintos formatos permitidos, además del código CSS necesario para su correcta visualización.



Enlace: Awesome CSS3 generators to simplify front end development

Hoy por hoy el gran dolor de cabeza para muchos maquetadores web, sobre todo aquellos que usan HTML5 y CSS3, es hacer que una página se vea bien en TODOS los navegadores, incluyendo (por desgracia) al tristemente célebre IE6, y también el 7 y 8, que son una patada en los huevos al hígado y ya no tendrían por qué ser considerados.

Lo bueno es que siempre hay por ahí alguien que nos echa una mano creando herramientas para hacer compatibles estas nuevas tecnologías con navegadores obsoletos, y que muchos hasta ahora se rehusan a actualizar.

En Onextrapixel han recopilado algunas herramientas (unas ya muy conocidas) que permiten solucionar en gran parte este problema de compatibilidad, alguno más que el otro, y es que tampoco se les puede pedir mucho...

1. TransformIE



2. ]CSS3 Support for Internet Explorer 6, 7, and 8


3. Sizzle


Enlace: CSS3 For Internet Explorer: Handy Compatibility Tools and Resources

Ian Hanson (@teapoted), es un diseñador y desarrollador web londinense que ha creado y compartido un muy funcional slider de contenidos hecho completamente con CSS3, y nada de JavaScript.

Este slider funciona como cualquier otro script similar hecho con ayuda de JavaScript, lo mejor de todo es que es sensible al dispositivo desde donde se visualice, adaptándose automáticamente a la pantalla de este.

Al estar hecho íntegramente con CSS3, es compatible con todos los navegadores modernos.

Este slider tiene un pequeño problema de compatibilidad con los dispositivos iOS (iPod Touch, iPhone y iPad) que no manejan adecuadamente las etiquetas <label>, para ello, el creador ha añadido un pequeño fix en JavaScript que corrige este problema.

Nota: No hay archivos disponibles para descarga, de modo que si deseas probar el slider en tu página, tendrás que guiarte mirando directamente el código fuente.

Enlace: Responsive CSS3 Slider

Una excelente recopilación la que han hecho en Smashing Apps, se trata de 43 tutoriales y técnicas CSS3, donde nos muestrán cómo aplicar las nuevas técnicas incluídas en el nuevo y cada vez más utilizado CSS3.

Lo interesante de usar CSS3 es que para muchos casos, ya no es necesario echar mano de JavaScript para realizar algunos efectos, como desenfoques, transiciones, animaciones, etc. Aquí les dejo tres tutoriales de ejemplo:

1. Cómo crear un menú desplegable con sólo CSS3


2. Personalizar formularios web con CSS3 y Webkit


3. Cómo crear un menú circular con CSS3


Enlace: Showcase Of Useful CSS3 Tutorials And Techniques