¡Prepárate para la poderosa propiedad CSS de forma de borde!

Entonces, recientemente obtuvimos nuevos shape() función (¡ahora una línea de base!) y corner-shape propiedad. ¿Qué más necesitamos en términos de crear formas en CSS? Déjame decirte: border-shape ¡propiedad!

shape()? corner-shape? border-shape? ! ¿De dónde vino todo esto?

Si no eres un fanático de las formas CSS como yo, es posible que te pierdas estas características, así que primero démosles una breve introducción formal…

shape() y corner-shape

este shape() la función es un nuevo valor clip-path y offset-path Crear formas CSS usando la sintaxis SVG es más fácil que otras formas path(). escribí un Explore esta función y otro artículo mío explorando Creación de formas complejas..

Hablando de SVG, puedes expresar cualquier forma SVG usando shape(). En otras palabras, puedes cambiar Convierte cualquier forma SVG en una forma CSS y adivina qué, Hice un convertidor que hace esto!

hasta corner-shape Sí, es una propiedad utilizada con border-radius. Como sugiere el nombre, le permite controlar la forma de las esquinas de un elemento utilizando palabras clave predefinidas.

.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
}

También se puede utilizar para crear formas CSS comunes, como cubrí en otro artículo. corner-shape.“

pero esto es corner-shape ¿Es la propiedad realmente útil o incluso necesaria? Aparte de squircle valor, la mayoría de las formas ya se pueden crear usando clip-path o mask. pero que corner-shape ¡Estos otros no pueden agregar fácilmente bordes y otras decoraciones a estas formas!

corner-shape No sólo da forma a las esquinas, sino que también admite otras propiedades como border y box-shadowpermitiéndoles seguir la forma en lugar del cuadro del elemento. Esto cambia las reglas del juego porque todos sabemos que agregar bordes a las formas es una pesadilla.

El soporte aún no es excelente (solo se admite Chromium mientras escribo esto), pero ahora es un buen momento para explorarlo y describir su potencial.

Ingresar border-shape!

Dar forma a las esquinas es genial, pero todavía estamos bastante limitados en lo que podemos hacer con él. Por ejemplo, ¿qué tal darle forma a un elemento completo? Eso es todo border-shape servirá. Acepta los mismos valores que clip-pathincluyendo nuevos shape() Función.

Entonces, funciona con clip-path? ¿Qué hay de nuevo?

como con corner-shapela mayoría de las propiedades decorativas, p. border, box-shadowy outline

clip-path (y mask) voluntad Todo el elemento, incluida la decoración, por lo que tener cenefas es un gran problema. No. Este es un problema importante al crear formas CSS.

este border-shape La propiedad surgió para solucionar este problema. En lugar de cortar el elemento, “le da forma”, permitiendo que su decoración siga esa forma. En otras palabras, ¡agregar bordes a formas CSS será muy sencillo!

Sin mencionar border-shape También es muy cómodo de usar. Si estás familiarizado con clip-pathentonces en realidad no tienes nada nuevo que aprender. Simplemente reemplace un atributo por otro.

.shape {
  /* Old code */
  clip-path: shape() | polygon() | ...;

  /* New code */
  border-shape: shape() | polygon() | ...;
}

Te invito nuevamente a conocer más. shape() función porque su valor es tal que border-shape Realmente poderoso. Los dos realmente van de la mano.

Ahora que comprende el propósito básico de esta propiedad, ¿podemos comenzar con las cosas divertidas? Estoy aquí para superar los límites y mostrarte lo que es posible usar border-shape.

notas: Actualmente, el soporte está limitado a Chrome, así que consulte la siguiente demostración usando Chrome.

solo forma de borde

Como dije, la primera gran ventaja aquí es agregar bordes a las formas que siguen la forma real, lo que también significa poder crear formas solo con bordes. Todo lo que tienes que hacer es escribir el siguiente código:

.shape {
  border: 8px solid red;
  border-shape: /* your shape code */;
}

La mayoría de las formas ya están disponibles en mi por lo que crear una forma que solo tenga borde es simplemente copiar y pegar. incluso algunos Ya está configurado para proporcionar versiones de formas complejas solo con bordes, como manchas, líneas onduladas, marcos delicados y más.

Actualicemos el código anterior de la siguiente manera:

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* you shape code */;
}

Mantienes el código de forma que ya tienes y luego agregas inset(0) En primer lugar. Sí, puedes tener dos valores de forma. border-shape El resultado es el siguiente:

de Especificación:

este border-shape El atributo acepta single <basic-shape> o dos <basic-shape>s:

soltero <basic-shape> (Modo viaje): El borde se representa como un trazo a lo largo del trazado de la forma, y ​​el ancho del trazo está determinado por el ancho calculado del borde asociado. Este modo es útil para establecer formas de contorno.

dos <basic-shape>s (modo de llenado) El límite aparece como el área entre dos caminos. La primera forma define el límite exterior y la segunda forma define el límite interior. Este modo proporciona un control preciso sobre la geometría del área límite.

Utilice un rectángulo básico como forma exterior (inset(0)), ¡pude convertir fácilmente la versión con solo bisel a la versión recortada!

¿Quieres una forma dentro de un círculo? ¡Simple!

Todo lo que hice fue reemplazar inset(0) (un rectángulo) con circle() (un círculo).

Pero podemos hacer esto de una manera sencilla. border-radius: 50%¿bien?

¡No! cuando con border-shapeeste border-radius Se ignora, lo cual es lógico ya que ya no necesitamos esquinas redondeadas: el elemento ahora tiene forma. Esto no es gran cosa ya que podemos crear cualquier tipo de forma usando border-radiuscomo se muestra en el ejemplo anterior.

notas: Si te preguntas por qué uso circle()No hay disputa, por favor mira mi artículo. “Funciones CSS que funcionan sin parámetros.“

Antes de pasar a la siguiente parte, aquí hay algunos ejemplos más con dos valores de forma:

¡Puedes usar prácticamente cualquier combinación para obtener formas de apariencia compleja sin tener que esforzarte mucho!

decoración de ruptura

Ahora tomemos un texto y apliquemos el código anterior a dos valores de forma:

.box {
  border-shape: inset(0) circle();
  border-color: pink;
}

Quizás esto no sea sorprendente, considerando lo que hemos aprendido hasta ahora. Definimos dos formas y dibujamos un borde en el área entre ellas. Lo nuevo aquí es que estamos tratando con contenido y, como pueden ver, se superpone a la frontera.

border-shape conformado todo El elemento, incluida la decoración del elemento, pero todo lo que hay en su interior permanece sin cambios y sigue la forma rectangular inicial. Este no es un comportamiento nuevo ya que ocurre lo mismo incluso con el caso clásico. border-radius. El contenido se desbordará a menos que decidamos ocultarlo usando overflow hidden.

En este caso no consideraría overflow propiedad porque quiero que el contenido se desborde y se coloque encima de la decoración del borde.

Ahora actualicemos el código de la forma de esta manera:

.box {
  border-shape: inset(0 -100px) circle(50px);
  border-color: pink;
}

Hice el círculo más pequeño y el rectángulo más grande. ¿Sabes adónde voy? Al hacer el radio del círculo 0 ¡Y con el rectángulo más grande, creé un efecto de fondo de ruptura!

.box {
  border-shape: inset(0 -100vw) circle(0);
  border-color: pink;
}

El elemento permanece centrado, pero su fondo (¡que estamos simulando con un borde!) se extiende hasta el borde de la pantalla.

Y esto no se limita a utilizar dos valores de forma. Incluso con un solo valor de forma, podemos lograr una decoración innovadora (Esto suele ser difícil) si considera cualquier valor que lo lleve fuera de los límites del elemento.

Aquí hay una demostración con muchos ejemplos que te dejaré explorar:

decoración parcial

Continuamos con la demostración anterior y probamos diferentes decoraciones.

Esta vez, en lugar de expandirme más allá de los límites del elemento, me quedé dentro de los límites del elemento para crear una decoración parcial. En otras palabras, ya no tenemos fronteras. border-shape No hay límite. ¡El único límite es tu imaginación!

En lo que confío principalmente es shape() función para crear decoraciones, así que hazte un favor y explora esta funcionalidad leyendo mi artículo Serie de cuatro artículos.! si dominas shape()puedes crear fácilmente decoraciones complejas usando border-shape.

Sí, border-shape Puede ser animado, podemos tener diferentes tipos de animaciones. Usando sintaxis binaria, podemos hacer border-width Crea valores que revelen el efecto:

Genial, ¿verdad? También podemos aplicar esto a elementos de imagen:

También podemos animar valores de formas para crear animaciones más complejas. Aquí hay una demostración de un efecto de rebote aplicado a una forma de burbuja (de mi artículo shape()”.

clip-path y border-shapey Entonces!

¿Por qué no añadir una animación sutil a la decoración anterior? Pase el cursor sobre el título y el texto para ver qué sucede:

¿Quieres más? ¡vamos!

esto es un Desliza el dedo entre los elementos del menú al pasar el mouse. ¡Las líneas rectas son aburridas!

¿Por qué no colocar un marco electrónico alrededor de su contenido? No te preocupes, las pantallas táctiles son seguras.

¿Qué tal un cargador elegante solo con límites? (Código tomado de )

nos deja Conectar círculos Una línea recta que se curva cuando los círculos se acercan y se extiende cuando los círculos se alejan. Arrastre los círculos en la demostración a continuación para ver el trabajo mágico:

en conclusión

Creo que ahora está claro por qué llamo “poderoso” a este nuevo atributo. Además de facilitar la creación de formas CSS, también nos permite agregar hermosas decoraciones, animaciones geniales y más.

No entré en detalles sobre la mayoría de las demostraciones porque quería mantener esta publicación ligera y mostrar el potencial. border-shape. Ahora que sabes que podemos crear cosas locas con él, ¡estad atentos para leer un artículo más detallado!

colección de formas CSS y mi generador en línea. He actualizado muchas formas usando shape()y estoy incluyendo border-shape Versión.