Este post fue visto: 175

Hoy les traigo estos freebies del mes: 5 generadores de código CSS para que puedas aplicar de forma rápida en tus proyectos, sin complicarte demasiado. Por más que digan que CSS no es un lenguaje de programación 😁, no todos pueden dominarlo tan fácilmente. Ni siquiera yo, que llevo casi 15 años haciendo código.

Estas herramientas me salvan cuando tengo dudas, o cuando necesito ver previamente como va a quedar. Y sobre todo, también me ahorran tiempo, ya que solo tengo que copiar y pegar. ¿No es genial?

Y aquí van, estos son, los 5 freebies del mes:

.

1- Generador de degradée

Los degradés o gradients nunca pasaron de moda, es más, volvieron con fuerza y completamente aggiornados. ColorSpace es una herramienta que uso con bastante frecuencia porque me permite generar degradée –de 2 y hasta 3 colores– de forma rápida y totalmente visual. Y no solo eso, también genera paletas de colores a partir de un color determinado. Es de gran ayuda cuando estás definiendo qué colores usar para un sitio web o una app. Aunque está en inglés, es muy intuitiva.

Color Space -- El blog de Aleare Design

Ir a ColorSpace

 

2- Textos con degradé

Los textos con degradé me encantan. Los uso en mi sitio web, ya que dan un toque de color único a los títulos. Combinado con la herramienta anterior, tendrás en pocos minutos el código para aplicar a todo tipo de títulos y textos que no van a pasar desapercibidos.

Text Gradient generator -- El blog de Aleare Design

Ir a TextGradients

 

3- Glassmorfismo

El glassmorphism o glassmorfismo es una de las tendencias en diseño web que está en pleno apogeo. Este interesante «efecto de vidrio esmerilado» se está usando mucho para destacar un bloque o recuadro, ya sea texto, una cita, títulos, popups o formularios. Con esta herramienta podrás generar de forma totalmente visual, eligiendo el nivel de transparencia, borde, color, etc. Y luego, copiar y pegar el código generado.

Glassmorfismo CSS -- El blog de Aleare Design

Ir a CSS.Glass

 

4- Set de efectos Hover con CSS

¡Qué lindos quedan los efectos hover! Le agregan dinamismo a cualquier título, recuadro de información o CTA. En este sitio vas a encontrar un set de efectos con código listo para copiar y pegar.

iHover efectos hover -- El blog de Aleare Design

Ir a iHover

 

5- Flexbox (incluye curso)

Sí, debo confesar que soy de la época del float 😅… Pero con CSS3 llegó Flexbox para salvarnos el día. Flexbox es un módulo de diseño flexible, creado para mejorar la forma que hacemos diseños responsivos. Con menos código, nos facilita el control del posicionamiento de los elementos, independientemente de su tamaño. Se puede aplicar a casi todo lo que te imagines en una web, desde la estructura principal de la web hasta un menú. Pero puede suceder –me pasa–, que tener en mente todas las variables no es tarea fácil. Por suerte, con esta herramienta, puedo definir previamente cuál será el comportamiento, y luego copiar y pegar el HTML+CSS. Lo bueno, es que además incluye un mini-curso al pie que te va a ayudar a entender mejor su funcionamiento y sintaxis.

Flexbox Generator -- El blog de Aleare Design

Ir a Flexbox

 

Y la yapa:

CSS Compressor

Como su nombre lo indica, es útil para achicar tamaño de las hojas de estilo y optimizar así la carga de un sitio web al máximo posible. Sobre todo en la carga de móvil, ya que Google prefiere y rankea mejor los sitios optimizados. Esta herramienta me ayuda un montón para comprimir mi código para que quede livianito, y tiene además varios niveles de compresión.

Consejo: si usan la compresión máxima, conserven siempre una versión de la hoja de estilo sin comprimir. ¿Por qué? Porque al hacer revisión de código, nos vamos a encontrar todo tan pero tan compactado que encontrar una clase a simple vista se nos va a complicar bastante 😅

CSS Compressor -- El blog de Aleare Design

Ir a CSS Compressor

 

Espero que les sea útil esta recopilación de freebies generadores CSS, directo de mi caja de herramientas personal, para que lo puedan aplicar a sus proyectos.

Happy coding!

 

.FREEBIES CSS

Avatar

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005