Los desarrolladores web siempre estamos buscando atajos para ahorrarnos algo de tiempo en nuestra rutina de trabajo. Muchas herramientas para desarrolladores nos facilitan muchísimos procesos, y ahora es cada vez más fácil obtener un producto terminado en un periodo corto de tiempo. Con el auge de los entornos de desarrollo basados en el navegador parece que el desarrollo web empieza a abandonar los entornos de escritorio. Puedes escribir código desde cualquier ordenador, e incluso probar el resultado directamente en el navegador.
Los generadores de código online te ayudan a construir tu código en un periquete. Una vez que sepas qué código necesitas generar, es sólo una cuestión de encontrar la herramienta adecuada para el trabajo. Estos son mis 6 generadores de código CSS favoritos, y todos son de uso completamente gratuito.
WAIT! Animate
Nunca ha sido sencillo eso de crear repetidas pausas donde quieras en las animaciones CSS. Pero con WAIT! Animate puedes generar el código exacto para poder encajar dichas pauses y que la animación funcione correctamente. Se trata de una aplicación web nueva que ha sido recientemente introducida por su creador, Will Stone.
Todo el mundo conoce las transiciones CSS y la propiedad animation-delay. Esta propiedad sólo retrasa la animación una vez al principio. Con WAIT! Animate puedes repetir indefinidamente animaciones con una pausa entre cada una de las repeticiones. Es realmente un generador de código de CSS único, y ofrece un gran atajo a la hora de desarrollar efectos de animación sin necesidad de escribir el código desde cero.
CSS3 Generator
CSS3 Generator es un generador más tradicional de esos fragmentos de código que seueles necesitar en situaciones cotidianas. La aplicación web CSS3 Generator dispone de más de 10 generadores de código diferentes, incluyendo las columnas de CSS, box shadows e incluso la nueva propiedad flexbox.
Por desgracia, la aplicación web es dinámica y se ejecuta en una sola página, así que no hay enlaces permanentes a cada uno de los generadores. Pero es muy fácil de usar, y funciona muy bien en todos los navegadores importantes. En la portada, sólo tienes que seleccionar el generador que desees utilizar, modificar algunas variables, y copiar el código.
Colorzilla Gradients
Los degradados de CSS son siempre de lo peorcito. Hay métodos para desarrollar tus propios mixins degradados en Sass, que funcionan muy bien. Pero si no estás usando Sass, o simplemente no te sientes agusto trabajando con preprocesadores, entonces te recomiendo ColorZilla Gradients.
Es totalmente gratuito y cuenta con un editor visual parecido al de Photoshop para generar los códigos de degradados. Puede mover los sliders en torno a un cuadro de degradado de color para generar el código CSS. Es posible añadir y quitar colores en el degradado y cambiar la dirección también.
CSS Type Set
¿Alguna vez has querido hacer una demo de algunos estilos tipográficos para ver cómo se ven? CSS Type Set es el sitio apropiado para eso. Introduce un poco de texto, y actualiza la configuración sobre el tipo de fuente, el tamaño de fuente, el color, el espaciado entre caracteres, y otras variables similares.
Todo se muestra en tiempo real, así puedes ver cómo sería el texto si se mostrase en una página web. El único inconveniente es la limitación en las opciones de la fuente. Sería genial si pudieras probar con las fuentes de Google Web Fonts, también. Para eso, puedes utilizar WebFont Tester, pero no genera ningún código CSS.
Enjoy CSS
Enjoy CSS es como un generador de código y un editor visual, todo en uno. Puedes crear elementos web, como botones y campos inputs mientras les aplican propiedades de CSS3. Es fácil de desarrollar casi cualquier cosa que puedas imaginar con todas las propiedades CSS que te brindan, incluyendo transiciones y transformaciones.
Incluso puedes probar las fuentes de Adobe con diferentes efectos para ver cómo se ven en el navegador. Pero la mejor característica es la galería Enjoy CSS que tiene fragmentos de código y plantillas prediseñadas para botones, iinputs y otros elementos similares.
Flexy Boxes
Si estás penando para entender los conceptos básicos de Flexbox, entonces no estaría de más que le echases un vistazo a Flexy Boxes. Abarca las diferencias entre cada versión de FlexBox, y cómo los motores de renderizado interpretan la sintaxis.
Debido a la juventud de Flexbox, no hay muchos sitios web que utilicen estas características. Pero una vez entiendas cómo funcionan, ahorrarás muchísimo tiempo a la hora de desarrollar proyectos y allanando el camino para la futura adopción de diseños CSS FlexBox.
Y estos han sido mis 6 generadores de código CSS favoritos. ¿Conoces alguno más? Pues no dudes compartirlo con todos nosotros en la zona de comentarios.
Fuente: hongkiat.com