Propiedades y valores CSS personalizados

Presentamos la compatibilidad ampliada con propiedades y valores CSS personalizados en Webflow

Nos emociona revelar una actualización que cambia las reglas del juego en Webflow: nuestra expansión de propiedades CSS más completa hasta la fecha, ahora totalmente integrada en el Webflow Designer. Esta actualización introduce propiedades y valores CSS personalizados, aumentando nuestra compatibilidad para cubrir casi el 90% de todas las propiedades disponibles. Esta mejora fundamental dota a nuestros usuarios de capacidades de estilo avanzadas directamente dentro de nuestra intuitiva interfaz de desarrollo visual, optimizando los flujos de trabajo y profundizando el potencial para la exploración de CSS.

Nuestro compromiso con los superpoderes del desarrollo web

Las propiedades y valores CSS personalizados mejoran las capacidades de diseño dentro de Webflow, reduciendo la dependencia del código personalizado y haciendo que el proceso de diseño sea más intuitivo y eficiente, lo que abre nuevas posibilidades de uso.

Tipografía y efectos de texto

• Tipografía avanzada: Prueba text-wrap para un flujo de texto equilibrado, text-decoration-thickness para estilos de subrayado personalizados y text-underline-offset para un posicionamiento preciso. Estas incorporaciones, entre otras, ofrecen un control detallado sobre el estilo del texto y pueden combinarse con animaciones para lograr efectos dinámicos.

Mejoras visuales

• Gestión de temas: El uso de valores como currentColor e inherit en CSS simplifica la creación de temas para casos como los modos claro y oscuro, permitiendo que los elementos se adapten al color y estilo de su contenedor principal, garantizando la coherencia en los distintos temas del sitio con el mínimo código.

Formas y máscaras personalizadas

• Clip-path y máscaras: Con propiedades como clip-path y mask-image, los diseñadores pueden crear formas más complejas y efectos de imagen matizados, como degradados y geometrías orgánicas e imperfectas, añadiendo profundidad y capas para lograr detalles más ricos y complejos.

Accesibilidad y preferencias del usuario

• Preferencias del usuario: Nuevas propiedades como accent-color y forced-color-adjust mejoran la accesibilidad y usabilidad de los sitios web, garantizando una mejor experiencia para todos los usuarios.

Funciones avanzadas

• Funciones como valores: Combina propiedades con funciones como calc(), clamp(), max()/min() y var() para lograr diseños y tipografías adaptables y responsivos con un nuevo nivel de sofisticación en el diseño web, todo dentro de un marco intuitivo.

Destacado de cliente: Jon Cole y las funciones CSS Calc

“Con la expansión de las capacidades CSS de Webflow, estamos en una posición en la que podemos tener lo mejor de ambos mundos. Esta actualización introduce una flexibilidad inigualable para frameworks como Blockhead al enriquecer nuestro kit de herramientas con propiedades CSS personalizadas y funciones avanzadas. Entre ellas, calc() destaca al simplificar el tamaño de la tipografía, permitiendo convertir REMs en valores equivalentes a píxeles para una mayor adaptabilidad sin perder la claridad de los sistemas basados en píxeles. También veo que supondrá un impulso para el trabajo con clientes; calc() garantiza que el código sea rico en funciones y esté adaptado a requisitos de diseño únicos sin tantos compromisos”. - Jon Cole, desarrollador web freelance y creador del framework de Webflow Blockhead

¿Qué vas a crear?

Explora el inmenso mundo de las propiedades y valores CSS ampliados en Webflow y descubre el impacto en tus proyectos. Tanto si te estás iniciando como si ya eres un experto, estas funciones están diseñadas para despertar tu creatividad y optimizar tu proceso de diseño. ¡Experimenta hoy mismo y libera todo el potencial de tus diseños web con Webflow!

Únete a nuestra transmisión en vivo para explorar las emocionantes funciones de las propiedades y valores CSS personalizados en Webflow. Comprueba de primera mano el poder de estas actualizaciones y cómo pueden transformar tu flujo de trabajo de diseño.