CSS Matic, nueva herramienta gratuita para diseñadores web

Una de las tareas que se pueden hacerse más pesadas a la hora de diseñar una página web es pasarse horas escribiendo interminables línas de código para dar forma a los distintos elementos de tu página. En eso estaban los creadores de CSS Matic, Alejandro Sánchez Blanes (Freepik) y Joaquín Cuenca (Thumbr.it), quienes decidieron desarrollar esta herramienta gratuita para crear de forma visual códigos CSS3 para que sólo haya que copiar y pegar las líneas de código que la misma herramienta te genera, ahorrando tiempo y dinero.

La idea es además ir sumándole funciones de modo que se convierta en la mayor suite gratuita online para diseñadores y programadores.

css3 automatico

¿Cómo funciona?

CSSmatic automáticamente crea los interminables y complejos códigos que usas normalmente tienes que escribir manualmente para incluir los elementos CSS3 en tu sitio web. Ha sido desarrollado 100% en JavaScript por lo que la compatibilidad entre dispositivos y la fluidez es notable, lo que le permite crear interesantes tipos de efectos, copiar el necesario código y pegarlo. Los efectos gráficos disponibles hasta ahora son degradados, bordes, texturas y sombras.

Una de las novedades que aporta esta herramienta está precisamente en los degradados y en la forma en que los creas, con múltiples colores y opacidades controlados visualmente, como lo harías en Photoshop, de forma sencilla e intuitiva. Además te ofrece la posibilidad de controlar el esquema de color y el brillo para resultados más sofisticados.

La otra novedad con respecto a otras herramientas disponibles radica en la forma de crear texturas para el fondo de la página, controlando el ruido, los colores, la transparencia y el tamaño.

La herramienta para crear bordes te permite redondearlos, controlar el radio de cada esquina independientemente, elegir colores de fondo y para el borde, la anchura, y también distintos marcos.

Con las sombras puedes completar el diseño y darle una mejor apariencia, controlando el tamaño de la sombra, su radio, color y difuminado.

Aunque, más allá de lo que te digamos nosotros, la mejor forma de conocer la herramienta es probarla, verás lo fácil, intuitiva y útil que es.