¡Bienvenido a tu herramienta interactiva para ajustar dinámicamente el tamaño de la fuente usando la función clamp()
de CSS! 🎉
Este proyecto permite experimentar con la propiedad font-size
utilizando clamp()
, que combina valores mínimos, ideales y máximos. Puedes ajustar estos valores en tiempo real y ver cómo afectan al tamaño del texto. Además, puedes copiar fácilmente el código CSS generado para usarlo en tus propios proyectos. 🖋️
- Actualización Dinámica: Ajusta los valores
min
,ideal
ymax
y observa cómo cambia el tamaño de la fuente en tiempo real. 🕒 - Interfaz Amigable: Una interfaz visual que muestra el tamaño actual de la ventana y el tamaño de la fuente. 🎨
- Edición de Texto: Edita el texto de vista previa para ver cómo se ajusta con diferentes contenidos. 📝
- Clona el Repositorio:
git clone https://github.com/Creatlydev/css-clamp-visualizer.git
- Navega al Directorio del Proyecto:
cd css-clamp-visualizer
- Inputs Dinámicos: Introduce valores mínimos, ideales y máximos para el tamaño de la fuente y observa los cambios instantáneamente. 🧮
- Actualización en Tiempo Real: El tamaño de la fuente y el ancho de la ventana se actualizan automáticamente. 🔄
- Copiar al Portapapeles: Copia el código
clamp()
generado al portapapeles con un solo clic. 📑
Aquí tienes un ejemplo de cómo se ve la herramienta en acción:
- Ancho de la ventana:
1536px
- Código CSS Generado:
font-size: clamp(24px, 6vw, 64px);
- Vista Previa: "Diseño y 🙌 Desarrollo 🚀 Web" con un tamaño de fuente de
48px
¡Las contribuciones son bienvenidas! Si tienes alguna mejora o encuentras algún error, no dudes en crear un pull request o abrir un issue. 🚀