En este artículo os traigo una colección muy interesante de recursos. Se trata de los 10 mejores generadores de CSS para usar en tu web. Y es que, hoy en día la verdad es que cuando llevamos a cabo el diseño de una página web, tenemos una variedad creativa alucinante a la que podemos recurrir para darle personalidad a cualquier proyecto de página web. Yo si me pongo a pensar, me recuerda a la época en la que diseñábamos páginas con flash, un momento en la historia del diseño web, lleno de creatividad que hizo que visitar una web fuera una experiencia única.
Con la llegada del responsive, lo cierto es que yo creo que vivimos un momento en el que se primó bastante la adaptabilidad y la experiencia de usuario en dispositivos móviles por encima de cualquier web creativa entre otras cosas porque las soluciones que teníamos en nuestra mano eran limitadas.
Hoy día podemos hacer con CSS un sinfín de cosas que hace diez años podíamos llevar a cabo pero usando archivos de imagen. Hoy con CSS podemos crear degradados, patrones, animar cualquier elemento y en definitiva hacer lo que a cada uno se le ocurra con bastante facilidad. Ahora bien, también lo tenemos más fácil porque hoy en día encontramos un montón de páginas web a modo de recursos donde podemos generar los códigos CSS para hacer lo que queramos. Hoy os voy a dejar por aquí los que yo creo que son los 10 mejores generadores de CSS que puedes encontrarte en Internet.
The Ultimate CSS Generator
Una pasada. Una web donde tenemos a nuestro alcance crear animaciones basadas en CSS, fondos para nuestras webs basados en CSS, podemos crear botones de todo tipo, listados, crear estilos para los textos de nuestras páginas webs, crear layouts directamente, crear efectos de transición o transformar elementos. Yo la veo como una web de recursos muy valiosa porque tienes generadores de todo tipo de elementos que seguro vas a usar en tu web y además con opciones muy interesantes y bastante variedad. Yo la veo fundamental dentro de l0s 10 mejores generadores de CSS, la verdad.
Clippy
Un generador que utiliza la propiedad clip-path para crear formas de cara a usarlas en elementos de nuestra web, como pueda ser imágenes con diferentes formas (formas geométricas, círculos, formas personalizadas. Yo la verdad es que la veo muy útil para generar de forma rápida cualquier forma que queramos crear de cara a usar en nuestra web así que guarda este generador que cuando menos te lo esperes, acabarán usándolo.
CSS-Scan
Reconozco que este generador es el que más uso últimamente porque puedo generar sombras para divs o elementos mediante la propiedad box-shadow y tengo 93 demos espectaculares ya creadas y solo tengo que escoger y seleccionar la que más me gusta y automáticamente se copia el código. Para mi fundamental en este listado de los 10 mejores generadores de CSS, la verdad. A destacar que tiene demos de sombras usadas en plataformas como Facebook o Stripe por poner un par de ejemplos.
Blobmaker
Uno de mis últimos descubrimientos. Un generador que te permite de una forma muy visual crear formas tipo burbujas y similares y que además te deja descargártelas o en formato SVG, PNG o lo más interesante de todo, copiarlo en formato código SVG. Ahora bien, para poder ese formato código, tendrás que transformarlo para que se adapte a tu hoja de estilos. Y para eso te dejo el siguiente generador.
SVG Backgrounds
En realidad es más un convertidor o transformador que un generador, pero resulta fundamental para convertir cualquier código SVG en formato CSS. Olvídate de archivos de imagen y usa código para crear patrones, formas y cualquier elemento gráfico que te haga falta. Hazlo todo en SVG y después transformarlo a CSS. Esto es el futuro, os lo aseguro.
Get Waves
De los creadores de Blobmaker también tenemos este maravilloso generador que funciona de la misma forma. Ahora bien, en vez de formas lo que creamos con este generador son olas de cualquier tipo que nos pueden servir para cualquier diseño web que tengamos entre manos. Para mi junto con Blobmaker, de las novedades más interesantes que he metido en los 10 mejores generadores de CSS.
Neumorphism
Con la llegada hace ya casi diez años del diseño flat design, yo creía que se había enterrado totalmente el diseño de interfaces que buscasen imitar la realidad, pero Apple lleva años empeñándose en no enterrar este tipo de diseño y lo que ha conseguido es revivirlo y ponerlo de moda. Este generador te permite recrear formas y efectos que imitan sombras y volúmenes tomando como base las luces y las sombras reales. Habrá a quién le guste, pero lo cierto es que a mi es un estilo que no me atrae. En cualquier caso este generador que os dejo funciona de lujo, os lo puedo asegurar.
CSS Ribbon Generator
Un generador muy particular que te permite crear lazos y cintas de las que usamos en diseño web cuando queremos destacar que un producto es novedad o tiene algún tipo de descuento. Ya no tienes que usar imágenes para esto, tienes este generador que te lo pone realmente fácil para recrear en una amplia variedad de tamaños, colores y formas.
CSS Duotone
Otra pasada de generador que te permite cambiar una imagen y crearle un efecto duotono tan de moda últimamente. Puedes escoger entre modelos predefinidos o crear el tuyo propio aplicando difuminado, espaciado, zoom y obviamente los colores que que quieres usar. Después seleccionas el tipo de mezcla y ya tienes tu imagen lista para copiar el código y aplicarla en tu propia página web.
3D Book Cover Generator
Por último os voy a dejar con un generador chulísimo que sirve para generar la portada en 3D de cualquier libro. Si bien es cierto que este generador solo lo vas a usar si estás vendiendo la descarga de algún libro o manual, me resulta super interesante que puedes modificar muchos aspectos de este mockup realizado simplemente con css. Puedes girar, rotar, dar más o menos perspectiva y en definitiva configurar un sinfín de opciones para recrear la portada de un libro. Me parece además una opción muy interesante para cerrar la lista de los 10 mejores generadores de CSS.
Espero que este listado con los 10 mejores generadores de CSS os haya parecido interesante. Creo que a menudo ayudan bastante a ahorrar tiempo si los usamos con criterio. ¿Qué os parece a vosotros?
