8 herramientas gratuitas para convertirte en un gurú de CSS3

Existen multitud de aplicaciones web que convierten a Internet en una especie de Photoshop descentralizado. Antiguamente, cuando había que implementar un diseño algo más extravagante de lo habitual, debíamos recurrir a fondos e imágenes previamente elaborados en un programa de edición de imagen. Existen muchas herramientas que facilitan estas tareas, a continuación os muestro las que más utilizo en mi día a día.

HTML Color Picker

Es una herramienta del W3 Schools que permite seleccionar un color y variaciones del mismo en formato HTML. Una variante muy interesante es HTML Color Mixer, que permite generar combinaciones entre dos colores.

Web: http://www.w3schools.com/tags/ref_colorpicker.asp

Colorzilla: Ultimate CSS Gradient Generator

Se trata de una poderosa herramienta de Colorzilla que se puede instalar como add-on tanto en Firefox como en Chrome. Permite diseñar complejos degradados para nuestros contenedores con varios niveles de degradación. Genera código compatible con múltiples navegadores, incluido Internet Explorer 9. Este add-on o extensión permite además funciones como las de la herramienta anterior: podemos saber el color HTML de cualquier píxel que seleccionemos desde nuestro navegador.

Web: http://www.colorzilla.com/gradient-editor/

CSS3 Button Maker

Aún recuerdo lo duro que solía ser diseñar un botón con efectos 3D en Photoshop. Todo eso se ha acabado con CSS3, y en particular gracias a CSS3 Button Maker. Botones en cuestión de segundos.

Web: http://css-tricks.com/examples/ButtonMaker/#

CSS3 Generator

La navaja suiza de las aplicaciones CSS3. Devuelve código para renderizar prácticamente cualquier cosa: bordes redondeados (border-radius), sombras paralelas (text-shadow, box-shadow), colores RGBA (con canal alfa), múltiples fuentes (@font face), división en columnas, animaciones y transiciones, etc. Muy útil.

Web: http://css3generator.com/

CSS3, please!

Esta aplicación «automágica» te permite editar código CSS cross-browser y ver los resultados en vivo. Después podrás copiar y pegar donde necesites el código generado. Así de fácil.

Web: http://css3please.com/

Font combinator

Esta herramienta permite la previsualización final de un estilo de fuente.

Web: http://font-combinator.com/

3D CSS Text

Un generador muy rápido de texto en 3D.

Web: http://www.3dcsstext.com/

Color Scheme Designer

No todos los colores combinan igual. Esta herramienta nos indica qué paleta de colores es compatible con nuestra aplicación:

http://colorschemedesigner.com/