Explorando la API CSS Paint: Redondeo de formas parte 2

by Silvia Mazzetta Date: 25-10-2021 css


Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos

 

Control de los radios

 

En todos los ejemplos que hemos visto, siempre consideramos un radio aplicado a todas las esquinas de cada forma. Sería interesante que pudiéramos controlar el valor del radio de cada esquina individualmente, de la misma manera que la propiedad border-radius toma hasta cuatro valores. Así que vamos a ampliar la variable --path para considerar más parámetros.

En realidad, nuestra trayectoria puede expresarse como una lista de valores [x y]. Haremos una lista de valores [x y r] en la que introduciremos un tercer valor para el radio. Este valor no es obligatorio; si se omite, se vuelve al radio principal.

 
.box {
  display: inline-block;
  height: 200px;
  width: 200px;

  --path: 50% 0 10px,100% 100% 5px,0 100%;
  --radius: 20px;
  -webkit-mask: paint(rounded-shape);
}
 

Arriba, tenemos un valor de 10px para la primera esquina, 5px para la segunda, y como no especificamos un valor para la tercera esquina, hereda los 20px definidos por la variable --radius.

Aquí está nuestro JavaScript para los valores:

 
var Radius = [];
  // ...
  var p = points[i].trim().split(/(?!(.*)s(?![^(]*?))/g);
  if(p[2])
Radius.push(parseInt(p[2]));
else
Radius.push(r);
 

Esto define un array que almacena el radio de cada esquina. Entonces, después de dividir el valor de cada punto, probamos si tenemos un tercer valor (p[2]). Si está definido, lo usamos; si no, usamos el radio por defecto. Más adelante, usamos Radius[i] en lugar de r.




 

Esta pequeña adición es una buena característica para cuando queremos desactivar el radio para una esquina específica de la forma. De hecho, vamos a ver algunos ejemplos diferentes a continuación.

 

Más ejemplos

 

Os muestro algunas demos utilizando este truco. Recomiendo poner el valor del radio a 0 para ver mejor la forma y entender cómo se crea el trazado. Recuerda que la variable --path se comporta de la misma manera que la ruta que definimos dentro de clip-path: polygon().

 

Ejemplo 1: Formas CSS

Con esta técnica se pueden crear un montón de formas extravagantes. A continuación se muestran algunas de ellas realizadas sin elementos adicionales, pseudoelementos o códigos de hack.

 
 

Ejemplo 2: Burbuja de diálogo

 

En el artículo anterior, añadimos un borde a un elemento de bocadillo. Ahora podemos mejorarlo y redondear las esquinas utilizando este nuevo método.

 
 

Si comparas este ejemplo con la implementación original, podrás notar que es exactamente el mismo código. Simplemente hice dos o tres cambios en el CSS para utilizar el nuevo Worklet.

 

Ejemplo 3: Marcos

 

A continuación encontrarás algunos marcos geniales para tu contenido. ¡Se acabaron los dolores de cabeza cuando necesitamos bordes con degradado!

 

Simplemente juegue con la variable --path para crear su propio marco responsivo con cualquier coloración que desee.

 

Ejemplo 4: Divisor de sección

 

Ya no se necesita SVG para crear esos divisores de sección ondulados que son tan populares hoy en día.

 
 

Observe que el CSS es ligero y relativamente sencillo. Sólo he actualizado la ruta para generar nuevas instancias del divisor.

 

Ejemplo 7: Modelado de formas

 

Jugar con valores de radio grandes nos permite crear transiciones geniales entre diferentes formas, especialmente entre un círculo y un polígono regular.

 
 

Si añadimos alguna animación en los bordes, obtendremos formas que "respiran".

 
 

Conclusiones

 

Espero que hayáis disfrutado de los "secretos" la API CSS Paint. A lo largo de esta serie, hemos aplicado paint() a un montón de ejemplos de la vida real en los que tener la API nos permite manipular elementos de una manera que nunca hemos podido hacer con CSS - o sin recurrir a hacks o números mágicos. Creo sinceramente que la API CSS Paint permite resolver problemas aparentemente complicados de forma sencilla y será una función a la que recurriremos una y otra vez.

Por supuesto, cuando los otros navegadores se pongan al día con ella...

 
by Silvia Mazzetta Date: 25-10-2021 css visitas : 365  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 7 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración