Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Cómo comenzar a usar las formas de CSS

Ajustar el contenido alrededor de rutas de acceso personalizadas

Razvan Caliman

Durante mucho tiempo, los diseñadores web se vieron obligados a crear dentro de las limitaciones del rectángulo. La mayor parte del contenido de la Web sigue atrapado en cuadros simples porque la mayoría de las iniciativas creativas de diseño no rectangular terminan en frustración. Eso está a punto de cambiar con la introducción de las formas de CSS, disponibles a partir de Chrome 37. Las formas de CSS permiten que los diseñadores web ajusten el contenido alrededor de rutas de acceso personalizadas, como círculos, elipses y polígonos, lo que rompe las restricciones del rectángulo.

Las formas se pueden definir de forma manual o se pueden inferir a partir de imágenes.

Veamos un ejemplo muy sencillo.

Tal vez hayas sido tan ingenuo como yo cuando, por primera vez, hiciste flotar una imagen con partes transparentes esperando que el contenido se ajustara y llenara los espacios vacíos, solo para decepcionarte por la forma rectangular que persiste alrededor del elemento. Las formas de CSS se pueden usar para resolver este problema.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

La declaración de CSS shape-outside: url(image.png) le indica al navegador que extraiga una forma de la imagen.

La propiedad shape-image-threshold define el nivel mínimo de opacidad de los píxeles que se usarán para crear la forma. Su valor debe estar en el rango entre 0.0 (completamente transparente) y 1.0 (completamente opaco). Por lo tanto, shape-image-threshold: 0.5 significa que solo se usarán los píxeles con una opacidad del 50% o más para crear la forma.

La propiedad float es clave aquí. Si bien la propiedad shape-outside define la forma del área alrededor de la cual se ajustará el contenido, sin el elemento flotante, no verás los efectos de la forma.

Los elementos tienen un área flotante en el lado opuesto de su valor float. Por ejemplo, si un elemento con una imagen de una taza de café se desplaza hacia la izquierda, el área de desplazamiento se creará a la derecha de la taza. Aunque puedes diseñar una imagen con espacios en ambos lados, el contenido solo se ajustará alrededor de la forma en el lado opuesto designado por la propiedad float, izquierda o derecha, nunca ambas.

En el futuro, será posible usar shape-outside en elementos que no estén flotantes con la introducción de las exclusiones de CSS.

Cómo crear formas manualmente

Además de extraer formas de imágenes, también puedes codificarlas de forma manual. Puedes elegir entre algunos valores funcionales para crear formas: circle(), ellipse(), inset() y polygon(). Cada función de forma acepta un conjunto de coordenadas y se vincula con un cuadro de referencia que establece el sistema de coordenadas. En un momento, hablaremos más sobre los cuadros de referencia.

La función circle()

La notación completa para el valor de una forma circular es circle(r at cx cy), donde r es el radio del círculo, mientras que cx y cy son las coordenadas del centro del círculo en los ejes X e Y. Las coordenadas del centro del círculo son opcionales. Si los omites, se usará el centro del elemento (la intersección de sus diagonales) como valor predeterminado.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

En el ejemplo anterior, el contenido se ajustará alrededor del exterior de una ruta circular. El único argumento 50% especifica el radio del círculo, que, en este caso específico, equivale a la mitad del ancho o la altura del elemento. Si cambias las dimensiones del elemento, se modificará el radio de la forma circular. Este es un ejemplo básico de cómo las formas de CSS pueden ser responsivas.

Antes de continuar, un breve comentario: es importante recordar que las formas de CSS solo influyen en la forma del área flotante alrededor de un elemento. Si el elemento tiene un fondo, la forma no lo recortará. Para lograr ese efecto, debes usar las propiedades de Enmascaramiento de CSS, ya sea clip-path o mask-image. La propiedad clip-path es muy útil porque sigue la misma notación que las formas de CSS, por lo que puedes reutilizar los valores.

Ilustración de la forma `circle()` + clip-path

Las ilustraciones de este documento usan el recorte para destacar la forma y ayudarte a comprender los efectos.

Volvamos a la forma circular.

Cuando se usan porcentajes para el radio del círculo, el valor se calcula con una fórmula un poco más compleja: sqrt(width^2 + height^2) / sqrt(2). Es útil comprender esto porque te ayudará a imaginar cuál será la forma circular resultante si las dimensiones del elemento no son iguales.

Todos los tipos de unidades de CSS se pueden usar en las coordenadas de la función de forma: px, em, rem, vw, vh, etcétera. Puedes elegir la que sea lo suficientemente flexible o rígida para tus necesidades.

Puedes ajustar la posición del círculo estableciendo valores explícitos para las coordenadas de su centro.

.element{
  shape-outside: circle(50% at 0 0);
}

Esto posiciona el centro del círculo en el origen del sistema de coordenadas. ¿Qué es el sistema de coordenadas? Aquí es donde presentamos los cuadros de referencia.

Cuadros de referencia para formas de CSS

La caja de referencia es una caja virtual alrededor del elemento, que establece el sistema de coordenadas que se usa para dibujar y posicionar la forma. El origen del sistema de coordenadas se encuentra en la esquina superior izquierda, con el eje X apuntando hacia la derecha y el eje Y apuntando hacia abajo.

Sistema de coordenadas para formas de CSS

Recuerda que shape-outside altera la forma del área flotante alrededor de la cual se ajustará el contenido. El área flotante se extiende hasta los bordes exteriores del cuadro definido por la propiedad margin. Se denomina margin-box y es el cuadro de referencia predeterminado para una forma si no se menciona ninguno de manera explícita.

Las siguientes dos declaraciones de CSS tienen resultados idénticos:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Aún no establecimos un margen en el elemento. En este punto, es seguro suponer que el origen del sistema de coordenadas y el centro del círculo se encuentran en la esquina superior izquierda del área de contenido del elemento. Esto cambia cuando estableces un margen:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

El origen del sistema de coordenadas ahora se encuentra fuera del área de contenido del elemento (100 px hacia arriba y 100 px hacia la izquierda), al igual que el centro del círculo. El valor calculado del radio del círculo también aumenta para tener en cuenta la mayor superficie del sistema de coordenadas establecido por el cuadro de referencia margin-box.