💻 Cómo Usar CSS Shapes en Tu Diseño Web

Los principios del maquetado-columnas y filas, ángulos y líneas-que usamos para crear sitios web hoy son muy influenciados por su herencia de material impreso. Y aunque la implementación de grid o grilla en la web está mejorando y es más prolija, el maquetado web en general aún es incipiente comparado con los medios impresos, especialmente cuando se trata de flujo del contenido.

Las revistas y periódicos siempre han disfrutado de elegantes maneras de acomodar el maquetado del contenido, como ajustar texto alrededor, o dentro de formas no rectangulares.

Revista Multipropósito por GreenSocks

Explorermos cómo el Módulo de CSS Shapes nos permitirá ésta misma libertad en la web.

Rápida Introducción a CSS Shapes

CSS Shapes permite a diseñadores web crear maquetados más abstractos y geométricos, más allá de simples rectángulos y cuadrados. La especificación nos proporciona nuevas propiedades CSS que incluyen shape-outside y shape-margin. El soporte de navegadores es razonable, aunque éstas propiedades están únicamente disponibles en Chrome, Opera y Safari, con el prefijo webkit-, por lo tanto -webkit-shape-outside .

La propiedad shape-outside causará que el contenido se ajuste alrededor (afuera) siguiendo el elemento curvo, más bien que al modelo de caja. Inicialmente también había shape-inside para ajustar el contenido dentro de un elemento; texto dentro de un elemento circular sería moldeado a la forma del círculo también. Sin embargo, la implementación ha sido pospuesta para CSS Shapes Nivel 2.

De arriba a abajo: shape-outside y shape-inside en acción.

La propiedad shape-margin establece el margen alrededor de cualquier forma que esté usando shape-outside.

Veamos algunos ejemplos.

Creando una Forma

La manera más fácil de descubrir cómo trabaja CSS Shapes es probablemente a través de la creación de un círculo. Así que, aquí está un div (nuestro círculo), con varios párrafos.

 
   <div class="circle"></div>
   <p>Lorem ipsum…</p>
   <p>Lorem ipsum…</p>
   <p>Lorem ipsum…</p>
  

Aquí están algunos estilos básicos, incluyendo la anchura y la altura de nuestro círculo, el border-radius para formar el elemento, y un float para que el párrafo se ajuste alrededor del elemento.

 
  .circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    }      
  

Como pudiéramos esperar, los párrafos ahora están ajustados alrededor del elemento. Sin embargo, ya que la propiedad border-radius no define la forma del elemento real, el párrafo no se ajusta a la curva del círculo.

Si inspeccionamos el elemento a través de las Herramientas para Desarrolladores de nuestro navegador, encontraremos que el elemento es, de hecho, todavía una caja o cuadrado. Así que, aunque nuestro div tiene la apariencia de un círculo, el border-radius no ha hecho nada a la forma real del elemento.

Nota el resaltado rectangular alrededor del elemento.

Para que nuestro párrafo se adhiera a la forma circular, necesitamos cambiar la forma del elemento real a través de la propiedad shape-outside; en éste caso, agregaremos una con la función circle() pasada como el valor.

 
.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    }
  

Nuestros párrafos se ajustan prolijamente alrededor de la circunferencia del círculo.

Adicionalmente, si ahora inspeccionamos el elemento a través de las Herramientas para Desarrolladores, veremos que el elemento es renderizado correctamente como un círculo.

Nota el resaltado más oscuro.

Con algunos márgenes, mira cómo podría resaltar un maquetado sencillo.

Personalizando el Círculo

La función circle() toma un par de valores para definir el radio y la coordinada del centro respectivamente: circle(r at x y). Por defecto, el valor del radio se deriva del tamaño del elemento; si el elemento es de 300px de ancho, por ejemplo, el radio será de 150px (el radio siendo la mitad del diámetro del círculo).

Similarmente, las coordenadas x y y son medidas en relación con el tamaño del elemento, y por defecto son establecidas en 50% 50%; justo en el centro del elemento.

El círculo es posicionado en el centro del elemento.

Éstos dos valores serán útiles cuando quieras redimensionar la forma, mientras mantienes el tamaño del elemento real, o mueves la forma mientras retienes la posición del elemento. En el siguiente ejemplo, reduciremos el radio del círculo a 60px y establecemos la coordenada del centro en 30% 70%, que debería mover el círculo a la parte inferior izquierda de la caja del elemento.

Los párrafos ahora pasan a través de la caja del elemeneto siguiendo el tamaño del círculo. Ver el demo.

Vale notar que cuando se modifica el círculo tanto la coordenada del centro como el radio tienen que ser definidos explícitamente; agregar sólo uno de ellos no es válido.

 
   circle( 60px at 30% 70% )  // correct.
   circle( 60px )  // invalid.
   circle( at 30% 70% )  // invalid.
  

Modelo de Caja de la Forma

CSS Shapes hereda el mismo principio del modelo de caja del elemento, pero aplicado afuera del alcance del mismo elemento. Ésto nos permite establecer separadamente el elemento, es decir, en border-box mientras estableces la forma en padding-box. Para cambiar la forma del modelo de caja, agrega una de las palabras reservadas del modelo de caja, content-box, margin-box, border-box o padding-box después de la función.

 
   .circle {
  width: 250px;
  height: 250px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  padding: 10px;
  border: 20px solid #ccc;
  margin: 30px;
  -webkit-shape-outside: circle() padding-box;
    shape-outside: circle() padding-box;
  }
  

El modelo de caja predeterminado de la forma es establecido en margin-box. Y en el siguiente ejemplo, lo hemos cambiado a padding-box para decirle al navegador que excluya el margen del elemento cuando se determine el tamaño o la extensión de la forma. Ahora debemos encontrar el párrafo que pasa a través del border, e inmediatamente tocando el padding del elemento.

El cuadrado naranja es el margen, el cuadrado amarillo es el borde, y el cuadrado verde es el padding.

Ampliamente recomiendo consultar nuestro curso gratuito Bases del Modelo de Caja CSS para saber más sobre el funcionamiento del modelo de caja.

Creando Más Formas

La especificación de CSS Shapes viene con varias funciones de formas más:

• ellipse() : como el nombre lo señala, ésta función creará una forma de elipse. Podemos configurar el radio de la elipse y mover la coordenada del centro de la forma también. Pero a diferencia de la fucnión circle(), la funcion ellipse() aplica dos medidas de radio, horizontal y vertical, por lo tanto ellipse( 100px 180px at 10% 20% ) .
• polygon() : Ésta función nos permite crear formas más complejas como triángulos, hexágonos, así como formas no geométricas. Usar polygon no es tan fácil como crear un círculo, pero la herramienta Convertidor de Trazos a Polígono lo hace más intuitivo.

Concluyendo

En éste tutorial, vimos la aplicación básica de CSS Shapes; creamos una forma, personalizamos el tamaño, la posición, y el modelo de caja. Al momento de escribir éste artículo, varios aspectos de CSS Sahpes áun están austeros alrededor de los bordes, que es la razón por la que probablemente no vemos que se utilice ampliamente todavía.

• Como se mencionó anteriormente en éste tutorial, la propiedad shape-inside de CSS Shapes, que nos permite ajustar y dar forma al contenido dentro de un elemento, ha sido reservada.
• La especificación de Formas CSS proporciona una propiedad separada llamada shape-box para definir el modelo de caja de la forma, aunque actualmente parece inaplicable a cualquier navegador.
• Safari requiere el prefijo -webkit, resaltando que ésta funcionalidad es experimental.

Sin embargo, a pesar del lento progreso y la disparidad de los navegadores por el momento, estoy ansioso por CSS Shapes! Una vez que los principales navegadores lo soporten no puedo esperar a ver algunos maquetados realmente creativos en la web!

_______

Bibliografía:

https://webdesign.tutsplus.com/