{"id":2503,"date":"2022-04-11T08:11:57","date_gmt":"2022-04-11T11:11:57","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=2503"},"modified":"2022-09-14T21:37:27","modified_gmt":"2022-09-15T00:37:27","slug":"freebies-del-mes-5-generadores-css","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/freebies-del-mes-5-generadores-css\/","title":{"rendered":"Freebies del mes: 5 generadores CSS"},"content":{"rendered":"
<\/div>

Hoy les traigo estos freebies del mes: 5 generadores de c\u00f3digo CSS para que puedas aplicar de forma r\u00e1pida en tus proyectos, sin complicarte demasiado. Por m\u00e1s que digan que CSS no es un lenguaje de programaci\u00f3n \ud83d\ude01, no todos pueden dominarlo tan f\u00e1cilmente. Ni siquiera yo, que llevo casi 15 a\u00f1os haciendo c\u00f3digo.<\/p>\n

Estas herramientas me salvan cuando tengo dudas, o cuando necesito ver previamente como va a quedar. Y sobre todo, tambi\u00e9n me ahorran tiempo, ya que solo tengo que copiar y pegar. \u00bfNo es genial?<\/p>\n

Y aqu\u00ed van, estos son, los 5 freebies del mes:<\/p>\n

.<\/span><\/small><\/p>


\n\"presearch\"<\/a><\/p>\n<\/div><\/div>\n

1- Generador de degrad\u00e9e<\/h3>\n

Los degrad\u00e9s o gradients nunca pasaron de moda, es m\u00e1s, volvieron con fuerza y completamente aggiornados. ColorSpace<\/strong> es una herramienta que uso con bastante frecuencia porque me permite generar degrad\u00e9e \u2013de 2 y hasta 3 colores\u2013 de forma r\u00e1pida y totalmente visual. Y no solo eso, tambi\u00e9n genera paletas de colores a partir de un color determinado. Es de gran ayuda cuando est\u00e1s definiendo qu\u00e9 colores usar para un sitio web o una app. Aunque est\u00e1 en ingl\u00e9s, es muy intuitiva.<\/p>\n

\"Color<\/p>\n

Ir a ColorSpace <\/i><\/a><\/p>\n

 <\/p>\n

2- Textos con degrad\u00e9<\/h3>\n

Los textos con degrad\u00e9 me encantan. Los uso en mi sitio web, ya que dan un toque de color \u00fanico a los t\u00edtulos. Combinado con la herramienta anterior, tendr\u00e1s en pocos minutos el c\u00f3digo para aplicar a todo tipo de t\u00edtulos y textos que no van a pasar desapercibidos.<\/p>\n

\"Text<\/p>\n

Ir a TextGradients <\/i><\/a><\/p>\n

 <\/p>\n

3- Glassmorfismo<\/h3>\n

El glassmorphism o glassmorfismo es una de las tendencias en dise\u00f1o web<\/a> que est\u00e1 en pleno apogeo. Este interesante \u00abefecto de vidrio esmerilado\u00bb se est\u00e1 usando mucho para destacar un bloque o recuadro, ya sea texto, una cita, t\u00edtulos, popups o formularios. Con esta herramienta podr\u00e1s generar de forma totalmente visual, eligiendo el nivel de transparencia, borde, color, etc. Y luego, copiar y pegar el c\u00f3digo generado.<\/p>\n

\"Glassmorfismo<\/p>\n

Ir a CSS.Glass <\/i><\/a><\/p>\n

 <\/p>\n

4- Set de efectos Hover con CSS<\/h3>\n

\u00a1Qu\u00e9 lindos quedan los efectos hover! Le agregan dinamismo a cualquier t\u00edtulo, recuadro de informaci\u00f3n o CTA. En este sitio vas a encontrar un set de efectos con c\u00f3digo listo para copiar y pegar.<\/p>\n

\"iHover<\/p>\n

Ir a iHover <\/i><\/a><\/p>\n

 <\/p>\n

5- Flexbox (incluye curso)<\/h3>\n

S\u00ed, debo confesar que soy de la \u00e9poca del float<\/strong> \ud83d\ude05… Pero con CSS3 lleg\u00f3 Flexbox para salvarnos el d\u00eda. Flexbox es un m\u00f3dulo de dise\u00f1o flexible, creado para mejorar la forma que hacemos dise\u00f1os responsivos. Con menos c\u00f3digo, nos facilita el control del posicionamiento de los elementos, independientemente de su tama\u00f1o. Se puede aplicar a casi todo lo que te imagines en una web, desde la estructura principal de la web hasta un men\u00fa. Pero puede suceder \u2013me pasa\u2013, que tener en mente todas las variables no es tarea f\u00e1cil. Por suerte, con esta herramienta, puedo definir previamente cu\u00e1l ser\u00e1 el comportamiento, y luego copiar y pegar el HTML+CSS. Lo bueno, es que adem\u00e1s incluye un mini-curso al pie que te va a ayudar a entender mejor su funcionamiento y sintaxis.<\/p>\n

\"Flexbox<\/p>\n

Ir a Flexbox <\/i><\/a><\/p>\n

 <\/p>\n

Y la yapa:<\/p>\n

CSS Compressor<\/h3>\n

Como su nombre lo indica, es \u00fatil para achicar tama\u00f1o de las hojas de estilo y optimizar as\u00ed la carga de un sitio web al m\u00e1ximo posible. Sobre todo en la carga de m\u00f3vil, ya que Google prefiere y rankea mejor los sitios optimizados. Esta herramienta me ayuda un mont\u00f3n para comprimir mi c\u00f3digo para que quede livianito, y tiene adem\u00e1s varios niveles de compresi\u00f3n.<\/p>\n

Consejo: si usan la compresi\u00f3n m\u00e1xima, conserven siempre una versi\u00f3n de la hoja de estilo sin comprimir. \u00bfPor qu\u00e9? Porque al hacer revisi\u00f3n de c\u00f3digo, nos vamos a encontrar todo tan pero tan compactado que encontrar una clase a simple vista se nos va a complicar bastante \ud83d\ude05<\/p>\n

\"CSS<\/p>\n

Ir a CSS Compressor <\/i><\/a><\/p>\n

 <\/p>\n

Espero que les sea \u00fatil esta recopilaci\u00f3n de freebies generadores CSS, directo de mi caja de herramientas personal, para que lo puedan aplicar a sus proyectos.<\/p>\n

Happy coding!<\/p>\n

 <\/p>\n

.FREEBIES CSS<\/span><\/p>\n