Piense fuera de la caja con CSS shape-outside

CSS se basa en un modelo de caja. Si tiene una imagen que es un círculo y desea envolver el texto, se ajustará al cuadro delimitador de las imágenes.

Forma exterior

Una nueva propiedad CSS llamada shape-outside le permite ajustar el texto que se ajusta a la forma de su imagen.

Que es la forma exterior

Shape-outside es una nueva propiedad de CSS que cambia la forma de los elementos que se envuelven. En lugar de limitarse a un cuadro delimitador rectangular alrededor de la imagen, la forma exterior nos permite dar forma al contenido para que se ajuste a la imagen.

Así es como MDN describe la forma exterior:

La propiedad CSS de forma exterior utiliza valores de forma para definir el área flotante de un flotador y hará que el contenido en línea se ajuste a la forma en lugar del cuadro delimitador del flotador.

La conclusión más importante de esa descripción es que esta nueva propiedad se aplica a las imágenes que utilizan un flotador. La propiedad CSS shape-outside controla cómo el texto se envuelve alrededor de cualquier imagen flotante. El texto que se ajusta puede tomar la forma de un círculo, elipse, rectángulo o polígono.

Usando shape-outside

La propiedad de forma exterior toma una "forma básica" y le aplica una función de forma. La función de forma se utiliza para cambiar la forma del área flotante de la forma. La propiedad de forma exterior de CSS proporciona funcionalidad para crear estas funciones de forma:

  • circulo
  • elipse
  • polígono
  • rectángulo
  • url

La imagen se puede posicionar con estos valores. Los valores se añaden al final:

  • cuadro de margen
  • caja de relleno
  • cuadro de borde

La imagen debe tener dimensiones intrínsecas. Debe establecer la altura y el ancho del elemento. Esto será usado por la función de forma para crear un sistema de coordenadas que se usa al envolver texto alrededor de la imagen.

Circulo

Circle () es uno de los valores funcionales proporcionados con shape-outside. La notación completa para circle () es circle (r en cx cy) donde r es el radio del círculo y cx y cy son las coordenadas para el centro del círculo. Si los omite, el centro de la imagen se utilizará como valores predeterminados.

A continuación, se muestra un ejemplo del uso de shape-outside en un círculo:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

Elipse

Elipse es una variación del círculo donde el elemento se alarga en el eje horizontal o vertical. La notación completa para elipse () es elipse (rx ry en cx cy) donde rx y ry son los radios de la elipse y cx y cy son las coordenadas del centro de la elipse.

Aquí hay un ejemplo del uso de shape-outside en la elipse:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

Polígono

La función de polígono proporciona una gama ilimitada de formas. La notación completa para polígono () es polígono (x1 y1, x2 y2,…)donde cada par especifica las coordenadas xy de un vértice del polígono. Para usar la función polygon () debe especificar un mínimo de 3 pares de vértices.

Polygon se utiliza con una ruta de recorte. La propiedad CSS del trazado de recorte crea una región de recorte que define qué parte de un elemento debe mostrarse. Todo lo que esté dentro de la región se muestra, mientras que los que están fuera se ocultan.

A continuación, se muestra un ejemplo del uso de shape-outside para crear dos formas triangulares y el texto fluye entre ellas:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Soporte del navegador

La forma exterior de CSS es compatible principalmente con Chrome, Opera y Safari.

Obtenga el código

El código para todos los ejemplos se puede encontrar en mi repositorio de github aquí.

Más artículos

Gracias por leer mi artículo. Si le gusta, haga clic en el icono de aplaudir a continuación para que otros encuentren el artículo. Estos son algunos de mis artículos que pueden interesarle:

Aquí hay 5 diseños que puede hacer con FlexBox

Amplitud primero búsqueda en JavaScript

Patrones de instanciación en JavaScript