Para el artículo de hoy he recopilado algunas páginas con generadores CSS, a las que puedes recurrir cuando tengas dudas, un poco de pereza o simplemente quieras experimentar con el código.
Seas primerizo o experimentado en el diseño de páginas web, ¿cuántas veces has recargado una página hasta llegar a la configuración correcta de una regla CSS? Venga a darle al Ctrl+F5 (refrescar página), una y otra vez, a ver si has ajustado bien los valores de la sentencia.
Me ha pasado en tantas ocasiones que no podría contarlas, especialmente trasteando con animaciones CSS un poco más complejas.
Para evitarme tener que escribir la regla y ejecutar la página; para acabar viendo que no me convence mucho el resultado, y tener que volver sobre mis pasos, recurro a generadores de código CSS.
La ventaja de estos generadores, es que puedes ver directo el letter-spacing o el radio de propagación de una sombra, por ejemplo, sin tener que ir a base de prueba y error en una web real.
Ya sabes que en algunos casos es difícil acertar a la primera, porque lo que funciona con ciertos colores o tipografías no lo hace bien con otros, así que no queda más que probar y probar.
¡Seguro que te interesa!
Primera lectura recomendada 😉
Antes de nada debo recomendarte los tutoriales CSS que tienes en esta misma web.
Por si no los has leído, te dejo los enlaces directos a los 4 artículos del curso. Una lectura con ejercicios prácticos incluidos, que te facilitarán el aprendizaje de código CSS y CSS3 desde el principio hasta un ponto en que puedas valerte por ti solo.
- Qué es y para qué sirve CSS.
- Dónde y cómo se utilizar CSS.
- Selectores CSS, IDs y Class.
- Terminamos de aprender CSS.
Cómo funcionan los generadores CSS
Cuando no se está muy seguro de la sintaxis, o no se conoce la propiedad que aplicar a un determinado elemento, es mucho más sencillo acudir directamente a un generador de CSS que estar buscando soluciones por ahí.
Los generadores CSS permiten la visualización en directo del estilo o comportamiento que tendrán los elementos, antes de aplicarles la reglas en tu sitio web.
Suelen tener un entorno bastante intuitivo y visual, y solo deberás introducir algunos parámetros para que se reflejen en la vista previa. Con lo que puedes probar varias veces o diferentes opciones, sin tener que estar refrescando la página constantemente.
Conforme manipules el elemento, irás viendo que se escribe el código CSS que necesitas de forma automática. De este modo, cuando tengas las propiedades y valores ajustados solo tendrás que copiar las reglas y pegarlas en tu archivo style.css.
Recibe nuevos artículos mensualmente
y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.
Los mejores generadores CSS
Como en todo, hay algunos generadores sencillos y otros muy enrevesados, en los que te toca trabajar desde confusas plataformas que se parecen más Photoshop que a algo relacionado con programación.
Me voy a decantar por generadores fáciles de usar, con los que puedes dar estilo a textos, botones, cajas…, o crear animaciones igual que en los generadores de código CSS más complicados.
CSS3 Button Generator
Es una plataforma desde la que puedes crear botones personalizados. Tiene una página de escaparate con algunos prediseñados, para que puedas utilizarlos tal cual o hacer los tuyos a partir de ellos.
CSS Button Generator
Tiene casi el mismo nombre y el mismo objetivo que el generador de CSS anterior, y aunque parece más simple por tener las opciones en un desplegable tipo acordeón, ofrece las mismas prestaciones.
CSS3 Generator
Una web bastante completa con diversos generadores CSS para crear gradientes, bordes, sombras, fondos, transformaciones y animaciones.
Ultimate CSS Gradient Generator
Generador de gradientes muy intuitivo para crear backgrounds con degradados o diseñar el fondo de los botones de tus llamadas a la acción.
Ui Gradients
En este caso no se trata de un generador CSS, sino de una biblioteca de gradientes prefabricados.
Simplemente elige el que te gusta entre los del escaparate y clica sobre el botón que muestra el código CSS. Fíjate en que puedes rotar el degradado desde el botón de arriba a la derecha.
CSS Matic
Otro generador con varias posibilidades, que tiene de especial la opción de generar texturas con ruido.
CSS3 Generator
Suite con opciones para modificar diferentes propiedades y que puede ser un poco confusa al principio, porque no dispone de la vista previa hasta que se introducen los valores. Pero útil como todas.
Web Code Tools
En este caso nos encontramos con algo más que un generador de CSS, ya que actúa como «chuleta» para alguna cosa más.
Wait! Animate
Este generador mola mucho. Ofrece los códigos para animar iconos mediante keyframes, a los que les puedes manipular los tiempos entre iteraciones y el tipo de animación. Con las mismas instrucciones puedes animar cualquier otro elemento aunque no sea un icono.
CSS Animate
En este generador la cosa se complica un poco en cuanto a su uso, pero vale la pena echarle una mirada porque se pueden crear animaciones bastante llamativas.
Griddy
Asistente ideal para generar contenedores de tipo rejilla como los de Bootstrap.
Doodle Nerd
Un elemento complicado de crear desde cero son las cintas, pero desde esta web es muy fácil.
CSS Arrow Please
De gran ayuda para crear cajas de texto con flechas e ideal para personalizar tooltips.
DS Overdesign
He dejado este para el final porque además de ser un generador con varias opciones, tiene dos en concreto (burbujas y lluvia), que te pueden servir para decorar un landing page el día que quieras hacer una locura. Las dos necesitan de un par de archivos javascript que también te proporciona.
Color Space
Este es un generador de paletas y gradientes CSS que me flipa, por eso he querido actualizar este post con él. Y lo utilizo para generar fondos degradados para los div o contenedores. Para que tengan… «ese toquecito».
No te pongo ni foto ni nada, pero si le echas un vistazo vas a alucinar con el recurso 😉
En la lista he incluido los mejores generadores de código CSS.
Puede que una de las herramientas favoritas de cualquier diseñador web, no solo porque evitan picar código, sino que además permiten experimentar en directo.
Esto te puede interesar
¿Conoces otros generadores CSS que se puedan añadir a esta lista?
Si te ha gustado comparte
About the Author
