14 generadores CSS que te evitarán recargas de página

Lista de generadores CSS que te ahorrarán la prueba y error

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 diseñar 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 la 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, ejecutar la página (para ver que no me convence el resultado) y volver sobre mis pasos, recurro a generadores de código CSS.

La ventaja de estos es que se puede ver en 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.

Primera lectura recomendada 😉

Por supuesto antes de nada debo recomendarte los tutoriales CSS de esta misma web.  Si no los has leído te dejo los enlaces directos a los 4 artículos del curso. Esta lectura con ejercicios prácticos incluidos, te facilitarán el aprendizaje de código CSS y CSS3 desde el principio.

  1. Comenzamos iniciándonos con CSS
  2. Descubrimos dónde y cómo se usa CSS
  3. Aprendemos los métodos de selección de elementos (selectores)
  4. Finalizamos y empezando a personalizar 

Cómo funcionan los generadores CSS

Cuando uno no está muy seguro de la sintaxis, o directamente no conoce la propiedad que aplicar a un determinado elemento, es mucho más sencillo ir directamente a un generador 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. Tienen 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 constantemente.

Conforme vayas manipulando el elemento irás viendo que se escribe el código CSS que necesitas. 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.

Lista de generadores de código CSS

Como en todo hay algunos más sencillos y otros muy enrevesados, en los que te toca trabajar desde confusas plataformas que parecen más Photoshop que algo relacionado con la programación. Yo 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 utilizar tal cual o hacer los tuyos a partir de ellos.

Los generadores CSS te permiten dar estilo sin escribir código CSS

CSS3 button Generator

CSS Button Generator

Tiene casi el mismo nombre y el mismo objetivo que el generador anterior, y aunque parece más sencillo por tener las opciones en un desplegable tipo acordeón, ofrece las mismas prestaciones.

Con los generadores CSS de internet puedes generar botones facilmente

CSS Button Generator

CSS3 Generator

Una web bastante completa con diversos generadores para crear gradientes, bordes, sombras, fondos, transformaciones y animaciones.

Existen plataformas con generadores para diferentes características

CSS3 Generator

Ultimate CSS Gradient Generator

Generador de gradientes muy intuitivo para crear backgrounds con degradados o diseñar el fondo de botones.

Dispones de un generador de gradientes fácil de usar, incluso para IE

colorzilla

Ui Gradients

En este caso no se trata de un generador de código, sino de una biblioteca de gradientes prefabricados. Simplemente elige el que te gusta entre los del escaparate. Luego 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.

Además de generadores tienes disponibles páginas web con gradientes personalizados prefabricados

uigradients

CSS Matic

Otro generador con varias posibilidades. Este tiene de especial la opción de crear texturas con ruido.

Hay generadores CSS con los que puedes crear una textura con ruido

CSS Matic

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.

Varoios generadores en una sola página web

css3generator

Web Code Tools

En este caso nos encontramos con algo más que un generador CSS ya que actúa como “chuleta” para alguna cosa más.

Este es un super generador de CSS, HTML, Metadatos, etc.

webcodetools

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.

Con este generador podrás crear las animaciones para tus iconos

waitanimate

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.

Existen otros generadores CSS que permiten realizar animaciones muy complejas

cssanimate

Griddy

Asistente ideal para construir contenedores de tipo rejilla.

Asistente para generar rejillas con CSS

griddy

Doodle Nerd

Un elemento complicado de crear desde cero son las cintas, pero desde esta web es muy fácil.

Entre los generaodres CSS más chulos está este generador de cintas o ribbons

doodlenerd

CSS Arrow Please

De gran ayuda para crear cajas de texto con flechas e ideal para personalizar tooltips.

Una de las cosas que puedes hacer con los generadores de CSS es personalizar tooltips y cajas de texto

cssarrowplease

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 proporcionan.

Este generador ofrece la posibilidad de crear burbujas animadas y lluvia con CSS y javascript

ds-overdesign

Muchas gracias por leer hasta aquí 😀

Espero que alguno de estos generadores CSS te ahorre trabajo y recargas innecesarias. Y por qué no, te descubra nuevas propiedades CSS que puedes modificar.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Lo hacemos?

Siguiente
Anterior

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.