La historia detrás de TryShape, un escaparate de la propiedad CSS clip-path | Programar Plus

Me encantan las formas, ¡especialmente las coloridas! Las formas en los sitios web se encuentran en la misma categoría de utilidad que los colores de fondo, las imágenes, los carteles, los separadores de sección, las ilustraciones y muchos más: pueden ayudarnos a comprender el contexto e informar nuestras acciones a través de las posibilidades.

Hace unos meses, desarrollé una aplicación para involucrar a mi hija de 7 años con las matemáticas. Aparte de la suma y resta básica, mi objetivo era presentar preguntas utilizando formas. Fue entonces cuando me familiaricé con el CSS. clip-path propiedad, una forma confiable de crear formas en la web. Luego, terminé construyendo otra aplicación llamada TryShape usando el poder de clip-path.

Lo guiaré a través de la historia detrás de TryShape y cómo ayuda a crear, administrar, compartir y exportar formas. Cubriremos mucho sobre CSS clip-path en el camino y cómo me ayudó a crear rápidamente la aplicación.

Aquí hay algunos enlaces importantes:

• Sitio TryShape
• Repositorio de GitHub
• Video de demostración
• paquete npm para envolver clip-path para React

Primero, el CSS clip-path propiedad y formas

Imagina que tienes una hoja de papel y un lápiz para dibujar una forma (digamos, un cuadrado) en ella. ¿Cómo vas a proceder? Lo más probable es que comience desde un point, luego dibuja un línea para llegar a otro punto, luego repítelo exactamente tres veces más para volver al punto inicial. También debes asegurarte de tener líneas opuestas parallel y de la same longitud.

Entonces, los ingredientes esenciales para una forma son puntos, líneas, direcciones, curvas, ángulos y longitudes, entre muchos otros. El CSS clip-path ayuda a especificar muchas de estas propiedades para recortar una región de un elemento HTML para mostrar una región específica. Se muestra la parte que está dentro de la región recortada y el resto se oculta. Brinda un océano de oportunidades a los desarrolladores para crear varias formas utilizando la propiedad de ruta de clip.

Obtenga más información sobre el recorte y en qué se diferencia del enmascaramiento.

Los valores de la ruta de recorte para la creación de formas

El clip-path La propiedad acepta los siguientes valores para crear formas:

• circle()
• ellipse()
• inset()
• polygon()
• Una fuente de clip usando url() función
• path()

Necesitamos entender un poco el sistema de coordenadas básico para usar estos valores. Al aplicar el clip-path propiedad en un elemento para crear formas, debemos considerar el eje x, el eje y y las coordenadas iniciales (0,0) en la esquina superior izquierda del elemento.

Aquí hay un div elemento con su eje x, eje y y coordenadas iniciales (0,0).

Coordenadas iniciales (0,0) con eje xy eje y

Ahora usemos el circle() valor para crear una forma circular. Podemos especificar la posición y el radio del círculo usando este valor. Por ejemplo, para recortar una forma circular en la posición de las coordenadas (70, 70) con un radio de 70px, podemos especificar el clip-path valor de propiedad como:

clip-path: circle(70px at 70px 70px)

Entonces, el centro del círculo se coloca en la coordenada (70, 70) con un radio de 70px. Ahora, solo esta región circular se recorta y se muestra en el elemento. El resto de la parte del elemento se oculta para crear la impresión de una forma de círculo.

El centro del círculo se coloca en las coordenadas (70, 70) con un área de 70 px x 70 px recortada. Por tanto, se muestra el círculo completo.

A continuación, ¿qué pasa si queremos especificar la posición en (0,0)? En este caso, el centro del círculo se coloca en el (0,0) posición con un radio de 70px. Eso hace que solo una parte del círculo sea visible dentro del elemento.

El centro del círculo se coloca en las coordenadas (0, 0) con un área de 70 px x 70 px que recorta la región inferior izquierda del círculo.

Pasemos a utilizar los otros dos valores esenciales, inset() y polygon(). Usamos un recuadro para definir una forma rectangular. Podemos especificar el espacio que puede tener cada uno de los cuatro bordes para recortar una región de un elemento. Por ejemplo:

clip-path: inset(30px)

Lo anterior clip-path value recorta una región al omitir los valores de 30px de los bordes del elemento. Podemos ver eso en la imagen de abajo. También podemos especificar un valor de inserción diferente para cada uno de los bordes.

El inset() La función nos permite recortar un área desde el borde exterior de una forma.

El siguiente es el polygon() valor. Podemos crear una forma poligonal usando un conjunto de vértices. Toma este ejemplo:

clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)

Aquí estamos especificando un conjunto de vértices para crear una región para recortar. La siguiente imagen muestra la posición de cada vértice para crear una forma poligonal. Podemos especificar tantos vértices como queramos.

La función polygon () nos permite crear formas poligonales usando el conjunto de vértices que se le pasan.

A continuación, echemos un vistazo a ellipse() y el url() valores. El ellipse() value ayuda a crear formas especificando dos valores de radios y una posición. En la imagen de abajo, vemos una elipse en la posición donde el radio está en (50%,50%) y la forma es de 70 px de ancho y 100 px de alto.

Necesitamos especificar dos valores de radios y una posición para crear una elipse.

url() es una función CSS para especificar el clip-path valor de ID del elemento para representar una forma SVG. Por favor, mire la imagen a continuación. Hemos definido una forma SVG usando clipPath y path elementos. Puede utilizar el valor de ID del clipPath elemento como argumento para el url() función para representar esta forma.

Aquí, estamos creando una forma de corazón usando el url() función

Además, podemos usar los valores de la ruta directamente en el path() función para dibujar la forma.

Aquí estamos creando una forma curva usando la función path ().

Bien. Espero que haya entendido diferentes clip-path valores de propiedad. Con este entendimiento, saquemos un botín en algunas implementaciones y juguemos con ellas. Aquí tienes un bolígrafo. Úselo para intentar agregar, modificar valores para crear una nueva forma.

Hablemos de TryShape

Es hora de hablar sobre TryShape y su historia de fondo. TryShape es una aplicación de código abierto que ayuda a crear, exportar, compartir y usar cualquier forma de su elección. Puede crear pancartas, círculos, artes, polígonos y exportarlos como archivos SVG, PNG y JPEG. También puede crear un fragmento de código CSS para copiar y usar en su aplicación.

TryShape se crea utilizando el siguiente marco y bibliotecas (y clip-path, por supuesto):

• CSS clip-path: Ya hemos hablado del poder de esta increíble propiedad de CSS.
• Next.js: El framework basado en React más genial que existe. Me ayudó a crear páginas, componentes, interacciones y API para conectarme a la base de datos back-end.
• HarperDB: una base de datos flexible para almacenar datos y consultarlos utilizando interacciones SQL y No-SQL. TryShape tiene su esquema y tablas creados en la nube HarperDB. Las API de Next.js interactúan con el esquema y las tablas para realizar las operaciones CRUD necesarias desde la interfaz de usuario.
• Firebase: servicios de autenticación de Google. TryShape lo usa para que el inicio de sesión social funcione con Google, GitHub, Twitter y otras cuentas.
• react-icons: una tienda para todos los iconos para una aplicación basada en React
• date-fns: la biblioteca moderna y liviana para formatear la fecha
• axios: Facilitar las llamadas a la API desde los componentes de React
• componentes con estilo: una forma estructurada de crear reglas CSS a partir de componentes de reacción
• react-clip-path: un módulo de cosecha propia para manejar clip-path propiedad en una aplicación React
• react-draggable: hace que un elemento HTML se pueda arrastrar en una aplicación React. TryShape lo usa para ajustar la posición de los vértices de las formas.
• downloadjs: desencadenar una descarga desde JavaScript
• html-to-image: convierte un elemento HTML en una imagen (incluidos SVG, JPEG y PNG)
• Vercel: lo mejor para alojar una aplicación Next.js

Creando formas en TryShape usando CSS clip-path

Permítanme resaltar el código fuente que ayuda a crear una forma usando CSS clip-path propiedad. El siguiente fragmento de código define la estructura de la interfaz de usuario de un elemento contenedor (Box) eso es 300px cuadrados. El Box elemento tiene dos elementos secundarios, Shadow y Component.

<Box 
  height="300px" 
  width="300px" 
  onClick={(e) => props.handleChange(e)}>
  { 
    props.shapeInformation.showShadow && 
    <Shadow 
      backgroundColor={props.shapeInformation.backgroundColor} 
      id="shapeShadow" /> 
  }
  <Component 
    formula={props.shapeInformation.formula} 
    backgroundColor={props.shapeInformation.backgroundColor} 
    id="clippedShape" />
</Box>

El Shadow componente define el área que está oculta por el clip-path recorte. Lo creamos para mostrar un fondo de color claro para que esta área sea parcialmente visible para el usuario final. El Component es asignar el clip-path valor para mostrar el área recortada.

Consulte las definiciones de componentes con estilo de Box, Shadow, y Component debajo:

// The styled-components code to create the UI components using CSS properties

// The container div
const Box = styled.div`
  width: ${props => props.width || '100px'};
  height: ${props => props.height || '100px'};
  margin: 0 auto;
  position: relative;
`;

// Shadow defines the area that is hidden by the `clip-path` clipping
// We show a light color background to make this area partially visible.
const Shadow = styled.div`
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

// The actual component that takes the `clip-path` value (formula) and set
// to the `clip-path` property.
const Component = styled.div`
  clip-path: ${props => props.formula}; // the formula is the clip-path value
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

Los componentes para mostrar una forma (áreas visibles y ocultas) después del recorte.

No dude en consultar el código base completo en el repositorio de GitHub.

El alcance futuro de TryShape

TryShape funciona bien con la creación y gestión de formas básicas usando CSS clip-path en el fondo. Es útil exportar las formas y los fragmentos de código CSS para usar en sus aplicaciones web. Tiene el potencial de crecer con muchas más características valiosas. El principal será la capacidad de crear formas con curvas bordes.

Para admitir las formas curvas, necesitamos el soporte de los siguientes valores en TryShape:

• una fuente de clip usando url() y
• path().

Con la ayuda de estos valores, podemos crear formas usando SVG y luego usar uno de los valores anteriores. A continuación se muestra un ejemplo de url() Función CSS para crear una forma utilizando el soporte SVG.

<div class="heart">Heart</div>
<svg>
  <clipPath id="heart-path" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>

Luego, el CSS ::

.heart {
  clip-path: url(#heart-path);
}

Ahora, creemos una forma usando el path() valor. El HTML debería tener un elemento como un div:

<div class="curve">Curve</div>

En CSS:

.curve {
  clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

Antes de que terminemos …

Espero que haya disfrutado conociendo mi aplicación TryShape y conociendo la idea que me lleva a ella, las estrategias que consideré, la tecnología bajo el capó y su potencial futuro. Considere la posibilidad de probarlo y revisar el código fuente. Y, por supuesto, siéntase libre de contribuir con problemas, solicitudes de funciones y código.

Antes de terminar, quiero dejaros con este breve video preparado para el hackathon de Hashnode donde TryShape fue una entrada y finalmente en la lista de ganadores. Espero que lo disfruten.

Vamos a conectarnos. Puedes @me en Twitter (@tapasadhikary) con comentarios, o siéntete libre de seguirlos.