Herramientas esenciales para la maquetación Web (desarrollo web)

Esta página contiene las herramientas más comunes en el desarrollo web. La mayoría de herramientas son generadores de código CSS. Estas herramientas te servirán para ayudarte en algunas de las tareas de maquetación que te puedas encontrar durante el desarrollo de tu trabajo como frontend developer.

Utiliza el menú de la izquierda (o el menú mobile) para navegar entre las distintas herramientas.

A continuación te describo las herramientas que encontrarás en esta página:

Generador de texto Lorem Ipsum

Éste módulo te permitirá seleccionar el tipo de salida para tu texto Lorem Ipsum.

Indica un número y seguidamente el tipo de salida deseada; párrafos, palabras, letras o lista (en este caso el número indicará la cantidad de ítems de lista).

También podrás seleccionar el formato de salida: formato HTML o formato Texto. Con el formato Texto copiarás las etiquetas "<p>" y, esto te puede servir para pegar en tu código HTML.

Generador de sombras en cajas (Box Shadow)

Este módulo, te permite generar sombras. Para que puedas reproducir un entorno real, puedes configurar el color de fondo, el color de la sombra y el color del elemento que tendrá la sombra. El único código CSS que se visualizará en el código generado será el corresponde a la sombra y a su transparencia.

Outline/Inset: Selecciona si la sombra es externa o interna.
Distancia horizontal/vertical: Selecciona la distancia horizontal y vertical para posicionar la sombra.
Radio de desenfoque: Selecciona el desenfoque de la sombra.
Radio extendido: Selecciona la extensión de la sombra.
Color sombra: Selecciona el color.
Transparencia: Selecciona la transparencia de la sombra.

Generador de sombras en textos (Text Shadow)

Este módulo, te permite generar sombras en los textos. Para que puedas reproducir un entorno real, puedes configurar el color de fondo, el color de la sombra y el color del texto que tendrá la sombra. El único código CSS que se visualizará en el código generado será el corresponde a la sombra y a su transparencia.

Texto: Texto que se quiere visualizar en la ventana de muestra.
Tamaño fuente: Tamaño de la fuente del texto de prueba.
Outline/Inset: Selecciona si la sombra es externa o interna.
Distancia horizontal/vertical: Selecciona la distancia horizontal y vertical para posicionar la sombra.
Radio de desenfoque: Selecciona el desenfoque de la sombra.
Radio extendido: Selecciona la extensión de la sombra.
Color sombra: Selecciona el color.
Transparencia: Selecciona la transparencia de la sombra.

Generador de esquinas redondas (Border radius)

Este módulo te permite generar esquinas redondeadas (border radius).

Podrás indicar el valor para todas las esquinas a la vez o individualmente.

Generador de bordes (Border y Outline)

Esta funcionalidad está integrada en el mòdulo de las esquinas redondeadas.

Tipo de border: Selecciona el tipo de borde que quieres aplicar.
Grosor del borde: Indica el grosor del borde.
Color del borde: Selecciona el color del borde.
Color de fondo: Selecciona el color del elemento.
Posición del borde: Indica en qué arista quieres visualizar el borde.

Conversor de px a em y viceversa

Este módulo te permitirá realizar la conversión de px a em y viceversa.

Deberás indicar un tamaño de fuente base (la configurada como fuente base en el navegador o el tamaño del elemento padre) y, seguidamente, introducir el tamaño en px o em dependiendo desde qué unidad quieres convertir.