CSS: Modelado

CSS permite modelar elementos HTML con nuevas formas utilizando las funciones para crear figuras geométricas, como sería un círculo, una elipse, un polígono, etc. De esta manera, es posible adaptar tanto el aspecto visual como el «modelo de caja», que por defecto es un rectángulo creado por el navegador web.

El modelado de los elementos se puede realizar teniendo en cuenta dos tipos de comportamiento: con la propiedad CSS clip-path se puede realizar un recorte visual del contenido; en este caso, la caja del elemento sigue siendo rectangular y el texto no se ajusta. En cambio, con la propiedad shape-outside se ajusta el texto alrededor de la forma geométrica deseada.

Lista de propiedades CSS descritas en este artículo:

La propiedad ‘clip-path’

La propiedad clip-path permite definir una región para recortar el área visible de un elemento. El recorte visual se puede realizar definiendo una figura geométrica a partir de una función. Por tanto, las partes que quedan fuera de la región recortada por la forma geométrica indicada serán invisibles.

Esta propiedad CSS admite como valor cualquiera de las funciones para crear figuras geométricas. El valor por defecto es none, con el que no se aplica ningún recorte visual sobre el elemento indicado.

Más allá de las formas geométricas definidas mediante las funciones CSS ya mencionadas, también es posible usar la función url() para indicar la ruta, relativa o absoluta, de un archivo de imagen vectorial SVG o un trayecto SVG del elemento <clipPath>, indicando su identificador (ID).

Dos ejemplos de uso de la propiedad clip-path con url():

.ejemplo1 {
  clip-path: url("archivo.svg#id");
}

.ejemplo2 {
  clip-path: url("#id");
}

Además, las funciones utilizadas para crear figuras geométricas se pueden usar en combinación con ciertas palabras clave que permiten definir la referencia de los límites geométricos de la caja. Por defecto se usa los bordes.

Vamos a ver algunos ejemplos en los que creamos distintos tipos de recorte visual. Partimos de la misma base: un cuadrado de 40×40 píxeles, y a partir de aquí generamos diferentes figuras geométricas.

Código CSS:

.contenedor {
  background: teal;
  display: inline-block;
  height: 40px;
  width: 40px;
}

.sin-recorte {
  clip-path: none;
}

.triangulo {
  clip-path: polygon(
    0 100%,
    50% 0,
    100% 100%);
}

.pentagono {
  clip-path: polygon(
    50% 0,
    100% 38%,
    81% 100%,
    19% 100%,
    0 38%);
}

.circulo {
  clip-path: circle(20px);
}

.elipse {
  clip-path: ellipse(20px 10px);
}

Resultado:

En la primera figura no se ha aplicado ningún tipo de recorte visual, mientras que las demás presentan diferentes formas geométricas.

Aprende más sobre las funciones para crear figuras geométricas.

La propiedad ‘shape-outside’

La propiedad shape-outside permite cambiar la forma geométrica de la caja de un elemento flotante, de modo que el texto se adaptará según la forma indicada. Por defecto, el texto se alinea a una caja que es rectangular. Si al elemento flotante le diéramos una forma circular, el texto se adaptaría a su curvatura.

Hay que tener en cuenta que solo se aplica a elementos flotantes.

En esta propiedad también puede usarse cualquiera de las funciones mencionadas para crear figuras geométricas, exceptuando la función path(). Su valor por defecto también es none, mediante el cual el texto que queda alrededor del elemento flotante se ajusta a una caja rectangular, como de costumbre.

Si se desea, también se puede utilizar la función url() para indicar la ruta válida de un archivo de imagen vectorial SVG, que puede ser relativa o absoluta.

Cuando se define una figura geométrica en un elemento flotante, se usa los bordes como referencia de los límites geométricos. Con las siguientes palabras clave se puede cambiar la referencia, combinándolas con las funciones.

Vamos a crear un elemento flotante con forma de triángulo rectángulo. Realizamos un recorte visual con clip-path y cambiamos la forma de la caja con shape-outside. El texto se adaptará a la hipotenusa.

Código CSS:

.forma-caja {
  background: teal;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  float: left;
  height: 90px;
  position: relative;
  shape-outside: polygon(0 100%, 0 0, 100% 100%);
  width: 90px;
}

Resultado:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Tal y como se puede apreciar, el texto se adapta gradualmente a la inclinación de la hipotenusa del triángulo equilátero que hemos dibujado.

La propiedad ‘shape-margin’

La propiedad shape-margin permite añadir un margen de separación que debe aplicarse entre la figura geométrica de la caja del elemento flotante y el texto. Por tanto, se usa en conjunto con shape-outside. El hecho de darle una separación puede mejorar la legibilidad y la apariencia.

Esta propiedad admite como valor un número en unidades de longitud, ya sean relativas o absolutas. Su valor por defecto es 0, es decir, sin ningún margen definido. Solo aplica a elementos flotantes.

Vamos a reutilizar el ejemplo anterior para darle un margen de 10 píxeles entre el elemento flotante y el texto.

Código CSS:

.margen-caja {
  background: teal;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  float: left;
  height: 90px;
  position: relative;
  shape-margin: 10px;
  shape-outside: polygon(0 100%, 0 0, 100% 100%);
  width: 90px;
}

Resultado:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

En este ejemplo, el texto continúa adaptándose a la forma geométrica que hemos definido, pero ahora lo hace separándose 10 píxeles.

La propiedad ‘shape-image-threshold’

La propiedad shape-image-threshold permite establecer el umbral del canal alfa (transparente) para extraer la forma de la caja del elemento. Lo que hace es definir la forma exterior a partir del nivel de transparencia de los píxeles de una imagen, que puede ser en los formatos PNG y SVG, o un degradado CSS.

Para usar esta propiedad, es necesario que el valor de shape-outside sea una imagen con transparencia mediante la función url(), una figura vectorial con path() o cualquier función de degradado.

Esta propiedad admite un valor numérico entre 0 y 1 que indica el umbral del canal alfa. El valor especifica el nivel de opacidad que deben tener los píxeles de la imagen para que se consideren parte de la forma. El valor por defecto es 0, fijando el umbral en los píxeles que sean transparentes al 100%.

Con el valor 0, el umbral queda fijado en los píxeles que sean totalmente transparentes, considerando un mínimo de opacidad para definir los límites de la forma. Con el valor 1, el umbral se traslada a los píxeles totalmente opacos, tratándolos como si fueran totalmente transparentes.

Por ejemplo, si se indica el valor 0.5, el umbral estará a partir de aquellos píxeles que tengan una opacidad (o transparencia) del 50%. Otro ejemplo más visual: si se indica el valor 0.3, el umbral estará en los píxeles que tengan una opacidad del 30%, equivalente a una transparencia del 70%.

Veamos un ejemplo de un cuadrado rectangular con color de fondo degradado que pasa del turquesa al transparente. Dejamos el umbral por defecto (0).

Código CSS:

.umbral-caja {
  background: linear-gradient(
    120deg,
    teal 10%,
    #ffffff00 60%);
  float: left;
  height: 90px;
  position: relative;
  shape-image-threshold: 0;
  shape-outside: linear-gradient(
    120deg,
    teal 10%,
    #ffffff00 60%);
  width: 90px;
}

Resultado:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

En este ejemplo, se puede ver como el texto se ha ajustado a los píxeles transparentes del degradado, quedando justo al límite del siguiente píxel que ya tenía un mínimo de opacidad.