Un conjunto de nuevas funciones de CSS permite diseñar páginas web más allá del formato de caja. La función shape() y las propiedades border-shape y corner-shape ofrecen a diseñadores y desarrolladores contornos curvos, recortes y bordes de forma libre, sin plug-ins ni JavaScript.
Shape() describe una forma mediante coordenadas geométricas. A diferencia de la antigua path(), que dependía de SVG y solo aceptaba píxeles, usa la sintaxis de CSS y se adapta al tamaño de la página. Combinada con la propiedad clip-path, ya se utiliza para dibujar talones de entradas y globos de conversación. border-shape lleva esas coordenadas al propio borde del elemento. El contorno se define al comienzo del renderizado, en lugar de recortarse al final.
"En otras palabras, poner bordes en formas CSS se volverá un juego de niños", escribió Temani Afif, que se describe a sí mismo como hacker de CSS, en un tutorial en el sitio CSS-Tricks (traducción libre).
En sus ejemplos, se pueden poner bordes dentro de bordes, recortar un corazón dentro de un cuadrado y animar el contorno cuando el ratón pasa por encima. Para quien no quiera escribir coordenadas, corner-shape ofrece esquinas listas para usar: redondeadas, biseladas, con muesca y el "squircle", mitad cuadrado, mitad círculo.
Según el sitio caniuse.com, todos los navegadores principales ya admiten shape(). border-shape y corner-shape aún son experimentales, pero las versiones actuales de Chrome, Edge y Opera ya las aceptan. Cuando el W3C publicó el primer estándar de diseño web, en 1996, las páginas copiaban la cuadrícula de periódicos y revistas. HTML y CSS solo dibujaban líneas horizontales y verticales; las formas libres exigían Flash, applets de Java o SVG limitado a un área de la página.
Con información de theregister.com.
Fuentes
Texto escrito con IA a partir de las fuentes citadas y revisado por las reglas automáticas de la redacción. Cómo trabajamos
¿Quieres ver resumer primero en las búsquedas de Google?
Añadir a las fuentes preferidas de Google
