Utilidades CSS online

Utilidades CSS online

En ocasiones quieres personalizar partes de la página web y con CSS puedes hacerlo. La mayoría de constructores tiene un sitio donde puedes hacerlo. Pero CSS a veces es un poco lio. Aquí te presentamos algunas utilidades online que te ayudarán si tienes que retocar el CSS y no sabes muy bien como.

Ilustración: Online illustrations by Storyset

 

Aquí tienes una lista de 6 herramientas online para generar o retocar CSS:

1. CSSmatic (https://www.cssmatic.com/)
– No requiere registro.
– Características: Generador de gradientes, sombras, bordes redondeados y efectos de texto. También ofrece una herramienta de recorte de imágenes y un generador de patrones.

2. CSS3 Generator (https://css3generator.com/)
– No requiere registro.
– Características: Genera código CSS para propiedades como bordes redondeados, sombras, gradientes, transformaciones y transiciones.

3. CSS Grid Generator (https://cssgrid-generator.netlify.app/)
– No requiere registro.
– Características: Permite generar diseños de rejilla utilizando la especificación CSS Grid. Proporciona opciones para configurar el número de columnas, el tamaño de las filas y columnas, y las brechas entre ellas.

4. ColorZilla (https://www.colorzilla.com/)
– No requiere registro, pero ofrece una versión Pro con características adicionales.
– Características: Incluye una herramienta de selección de colores con cuentagotas, generador de gradientes, analizador de colores de página, y generador de paletas de colores.

5. CSS Beautifier (https://www.freeformatter.com/css-beautifier.html)
– No requiere registro.
– Características: Formatea y reorganiza el código CSS para mejor legibilidad. Puede ser útil para dar formato a código CSS existente y hacerlo más estructurado.

6. CSS Minifier (https://cssminifier.com/)
– No requiere registro.
– Características: Minifica el código CSS, eliminando espacios en blanco y reduciendo el tamaño del archivo. Puede ser útil para optimizar la carga de páginas web al reducir el tamaño de los archivos CSS.

Estas herramientas online te permitirán generar y retocar CSS de manera fácil y rápida sin tener que instalar ningún software adicional.

Más utilidades CSS

 

Border Radius

Si queremos hacer que nuestra caja tenga los bordes redondeados, esta es tu página. Sólo tienes que indicar los pixeles que debe tener el redondeado. aplicar y copiar el código

 

6 herrmientas para medir la velocidad de carga de tu web

6 herrmientas para medir la velocidad de carga de tu web

La velocidad de un sitio web es esencial para evitar perder clientes / usuarios incluso antes de que hayan entrado en nuestra web.  Optimizar los tiempos de carga de una web, ya sea desde un dispositivo móvil como de sobremesa o portatil,  sirven para ofrecer una buena experiencia de usuario y además ayuda a mejorar tu posicionamiento en Google y el resto de buscadores.

Aquí tienes una lista de 6 utilidades para medir la velocidad de carga de una web:

1. Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights)

  • No requiere registro.
  • Versión gratuita.
  • Proporciona una puntuación de velocidad de carga, tanto para dispositivos móviles como para escritorio, junto con una lista de mejoras sugeridas. También muestra información sobre el rendimiento, la optimización móvil y la usabilidad.

2. GTmetrix (https://gtmetrix.com/)

  • Registro opcional (proporciona funciones adicionales al registrarse).
  • Versión gratuita con opciones de actualización a planes de pago. La versión gratuita te permite monitorizar hasta 10 páginas las últimas 24 horas y guardar lel último escaneo que hayas hecho de cada página.
  • Proporciona una puntuación de velocidad de carga, junto con información detallada sobre el rendimiento de la página, como el tiempo de carga, el tamaño de la página, el número de solicitudes HTTP, entre otros. También ofrece consejos específicos para mejorar el rendimiento.

3. Pingdom Website Speed Test (https://tools.pingdom.com/)

  • No requiere registro.
  • Versión gratuita con opciones de actualización a planes de pago.
  • Muestra el tiempo de carga de la página, el tamaño total de la página y el número de solicitudes realizadas. También proporciona un desglose detallado de cada solicitud HTTP, así como sugerencias para mejorar el rendimiento.

4. WebPageTest (https://www.webpagetest.org/)

  • No requiere registro.
  • Versión gratuita con opciones avanzadas disponibles al registrarse.
  • Permite realizar pruebas de velocidad de carga desde diferentes ubicaciones y navegadores. Proporciona información detallada sobre el rendimiento, como el tiempo de carga, el tamaño de la página, el tiempo hasta el primer byte, entre otros. También ofrece un informe de rendimiento con sugerencias para mejorar.

5. Dareboost (https://www.dareboost.com/)

  • Registro opcional (proporciona funciones adicionales al registrarse).
  • Versión gratuita con opciones de actualización a planes de pago.
  • Proporciona una puntuación de velocidad de carga y un análisis detallado del rendimiento de la página. Además, ofrece consejos para mejorar el tiempo de carga, la optimización de imágenes, la caché y otros aspectos relacionados con el rendimiento.

6. YSlow (https://yslow.org/)

  • No requiere registro.
  • Versión gratuita.
  • Es una extensión del navegador web que analiza el rendimiento de una página y proporciona una puntuación de velocidad junto con recomendaciones específicas para mejorar el rendimiento, como la reducción del número de solicitudes HTTP, la habilitación de la compresión GZIP, entre otros.

Estas herramientas te ayudarán a evaluar la velocidad de carga de tu sitio web y te proporcionarán información valiosa para optimizar su rendimiento.