5 poderosas herramientas CSS para Frontends

No importa que tan experimentado seas, con las herramientas adecuadas nuestras vidas pueden hacernos la vida mucho más fácil. «Solo eres tan bueno, como las herramientas que usas» por eso tomate un tiempo para conocer estas herramientas CSS que se adapten a lo que se necesite.

En este articulo una serie de herramientas para que cada desarrollador pueda utilizar para facilitarse un poco la vida y por su puesto… ser más eficiente.

1. Flexbox Help

Flexbox.help es una gran herramienta CSS que puedes utilizar siempre que necesites ayuda con flexbox. Particularmente soy fan de GridLayout, pero si eres nuevo con flexbox, esta herramineto te permite jugar con todas las opciones de flex disponibles.

El código CSS se genera en función a las opciones que hayas seleccionado, por lo que no es necesario escribir el código desde cero.

Herramienta CSS para Flexbox
Herramienta para general codigo CSS con Flexbox

2. Herramienta CSS para generar «Neumorphism»

Hay quienes están a favor del «neumorphism» como un paso más allá de la tendencia del minimalismo, estilo que se pretende usar sobre todo en aplicaciones o dashboards.

Con este generador, podrás crear desde un color varias estilos de sombras que crean este estilo de diseño

Neumorphism CSS

3. SASS to CSS

Con esta herramienta, puede convertir tu código SASS y convertirlo a CSS. Esto podría ser útil siempre que necesite hacer que el código SASS que ha escrito esté listo para usar en la web

Convertir SASS a CSS

4. Generador de paletas de colores

A veces solo nos falta la inspiración cuando se trata de encontrar los colores para usar para un determinado diseño o sitio web. Siempre que no tengamos inspiración, debes usar esta herramienta. Es una herramienta muy elegante y fácil de usar que le brinda los mejores esquemas de color.

Colors, herramientas CSS

5. Oscurecer y aclarar cualquier color

Esta herramienta es distinta y casi similar a la anterior. Con esta herramienta nos permite oscurecer o aclarar un color especifico. Ideal para generar un paleta de color que complemente al color principal. Ya sea efectos de transición o cuando pasemos el mouse por algún tipo de elemento que genere un acción.

HexColorTool

Conclusión

Ahora que hemos llegado al final de esta lista, espero que hayas elegido una o dos herramientas CSS que podrían hacerte la vida un poco más fácil.

¡Gracias por leer!

Imagen por defecto
Appatico

Deja un comentario