Cómo empezar con las formas CSS

La web ha sido típicamente un lugar de cuadros y rectángulos, pero una especificación CSS emergente va a cambiar eso. En este artículo, te presentaré las formas CSS, explicando qué son y los conceptos básicos que necesitas para comenzar a usarlas.

Todos los ejemplos están vinculados en Github, para que pueda ver y descargar el código fuente como puntos de partida para su propia experimentación.

¿Qué son las formas CSS?

La Especificación de formas CSS describe formas geométricas para nosotros en CSS. En el Nivel 1 de la especificación, ahora en Estado de recomendación candidata, las formas solo se pueden aplicar a elementos flotantes. Un ejemplo es la forma más sencilla de empezar.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

En el ejemplo anterior, agregamos esta clase a una imagen. Flotamos la imagen a la izquierda, le damos un ancho, alto y un margen y luego usamos la propiedad forma-exterior para curvar el texto alrededor del círculo.

Ver el ejemplo

Antes de seguir adelante, use Chrome y diríjase a http://betravis.github.io/shape-tools/ y arrastre el marcador Mostrar formas a la barra de marcadores.

Si luego va a mi página de ejemplo y hace clic en el marcador, puede ver cómo se dibuja la forma del círculo:

Formas básicas

La forma-exterior La propiedad utilizada en nuestro ejemplo simple puede tomar varios valores. Las primeras posibilidades se denominan «formas básicas» en la especificación. Estas formas básicas son funciones:

• recuadro()
• circulo()
• elipse()
• polígono()

recuadro()

La recuadro() La función es definir formas en elementos rectangulares, lo que el flotador lo hace por nosotros y en la mayoría de los casos es adecuado. Puede haber ocasiones en las que el control adicional resulte útil.

La recuadro() A la función se le pueden pasar cuatro argumentos de posición que están desplazados hacia adentro desde los bordes del elemento, más un radio de borde para la forma rectangular, precedido por la palabra clave ‘round’.

recuadro (radio de borde redondo superior derecho inferior izquierdo);

por ejemplo:

inset(10px 20px 10px 20px round 50%);

Los argumentos para el recuadro siguen la misma abreviatura que el margen, por lo que si desea un recuadro de 20 píxeles alrededor del elemento, puede usar:

En mi ejemplo, he usado una imagen que tiene mucho espacio en blanco debajo. Si hago flotar la imagen, tengo un gran espacio debajo. Al usar el valor de inserción, puedo insertar la parte inferior de la forma, lo que permite que el texto fluya más cerca de ella.

.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

Ver el ejemploy use el marcador Mostrar formas para ver la forma.

circulo()

Conocimos la forma básica del círculo al principio de este artículo. La circulo() El valor de forma se describe completamente en la especificación como:

El valor r es el radio del círculo, siendo el 50% la mitad del ancho del elemento. Los otros dos valores son las coordenadas xey para el centro del círculo, esto esencialmente le permite empujar el círculo alrededor.

En mi ejemplo usé:

También podría haber descrito esto como:

En mi página de ejemplo en Github Tengo un icono, tiene un fondo transparente y para aclarar los ejemplos le he dado a la imagen un color de fondo gris, relleno, un borde y un margen:

.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }

Está configurado para flotar a la izquierda, y si no aplicamos ninguna forma a esta imagen, se verá como la captura de pantalla a continuación.

Puedo crear una forma de círculo simple:

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

Si utilizo el valor del círculo de shape-inside y esta vez cambio las coordenadas. El círculo se empuja hacia arriba y hacia la izquierda.

.circle-coords { shape-outside: circle(50% at 30% 30%); }

Puede utilizar valores absolutos o relativos para las coordenadas o palabras clave como con las imágenes de fondo de posicionamiento.

En este punto, vale la pena echar un vistazo al concepto de cuadros de referencia. Hay cuatro posibles cuadros de referencia que podemos utilizar:

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

El cuadro de referencia predeterminado para el círculo es el cuadro de margen.

shape-outside: circle(50%) margin-box;

Es lo mismo que escribir:

shape-outside: circle(50%);

Como era de esperar, margin-box está limitado por el margen del elemento, border-box por el borde, padding-box por el relleno y content-box estará limitado por el contenido real.

Leer Este artículo para obtener una explicación completa de cómo funcionan los cuadros de referencia en el contexto de las formas CSS.

Si echamos un vistazo a mi página de ejemplo utilizando el marcador Mostrar formas, puede ver claramente cómo funciona esto.

Lo último que te mostraré con el círculo es cómo recortar el contenido para seguir la forma que has creado. Cuando agregué relleno y bordes visibles a mi elemento, nuestro texto parece superponerse. De hecho, podemos recortar el contenido de la forma utilizando la propiedad clip-path de la especificación CSS Masking Level 1. Actualmente requiere prefijos (ver [Can I Use][7]).

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

Como puede ver en la captura de pantalla anterior, nuestro elemento ahora está recortado para seguir la curva. Esto funciona muy bien para las imágenes, lo que le permite recortarlas para que el texto parezca fluir a lo largo de las curvas.

elipse()

Muchas formas se pueden curvar utilizando el valor de elipse, incluso si no son obviamente una elipse.

Usar elipse es muy parecido a usar círculo, excepto que en lugar de un valor para el radio, debe especificar el radio xey por separado.

shape-outside(rx ry at cx cy);

Los valores de radio pueden ser unidades absolutas o relativas y también palabras clave. lado más cercano y el lado más lejano. Estas palabras clave también son válidas para su uso como radio de un círculo, aunque menos útiles en la práctica.

Mi ejemplo sin forma aplicada simplemente flota.

.shape { float: left; width: 200px; height: 200px; margin: 20px; }

Puedo usar las palabras clave de radio:

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

Lo que crea un círculo en este elemento ya que las dimensiones reales de la imagen son cuadradas.

Para forzar una elipse utilizo unidades de longitud absoluta.

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

Para cambiar la elipse, cambio las coordenadas:

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

polígono()

Si necesita un control realmente fino al dibujar su forma, el valor del polígono le ayudará. Puede especificar tantas coordenadas como necesite para su forma, con un mínimo de tres.

Cada par de coordenadas está separado por una coma.

.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }

Con el marcador Mostrar formas puede ver la forma.

Formas de una imagen

Otra forma de crear una forma es dar una imagen como valor de forma exterior. Esa imagen debe tener un canal alfa. (Puede obtener más información sobre cómo guardar sus imágenes si usa Photoshop en el Blog de Adobe Web Platform.)

Puede usar una imagen que ya esté en su página o pasar una imagen de otro lugar.

Nota: La imagen que utilice debe ser compatible con CORS. La primera vez que jugué con esto, no pude entender por qué mi forma no funcionaba cuando probé localmente. Descubra más aquí.

Mi página de ejemplo contiene tres usos diferentes de esta técnica. En el primer ejemplo, tengo una imagen en mi página y también paso esa imagen como la URL para crear la forma.

.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }

La forma-imagen-umbral define el umbral de opacidad que debemos usar, desde 0 que es completamente transparente hasta 1 que es completamente opaco.

Como puede ver, nuestro texto coincide con la imagen.

En el segundo ejemplo utilizo un icono diferente y también configuro el margen de forma propiedad. Esto crea un margen curvado alrededor de la ruta del elemento.

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }

No es necesario crear una forma basada en algo en la página. En este último ejemplo, he creado una imagen en Photoshop, que se ve así.

Voy a usar eso y crear una forma en algún contenido generado para dar forma a mi texto a lo largo de una línea diagonal.

.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

Esto significa que puede crear una imagen de enmascaramiento y usarla independientemente de lo que esté en su página.

Formas del cuadro de referencia

También puede dar un valor a la propiedad shape-outside, que es el cuadro de referencia que discutimos anteriormente cuando miramos el valor circle ().

Por ejemplo:

.circle-margin-box { shape-outside: margin-box; }

Esto es útil cuando ha usado border-radius para agregar un borde redondeado a un elemento y simplemente desea que el contenido se curve alrededor de ese borde. Como en este ejemplo.

Soporte del navegador

Una de las cosas buenas de CSS Shapes es que, como deben aplicarse a un flotador, pueden usarse fácilmente como una mejora progresiva para su sitio.

Los navegadores que no son compatibles con Shapes mostrarán el flotador como es de esperar, con un cuadro cuadrado alrededor del elemento. Los navegadores que admitan Formas tendrán la forma que especificó. Puede ver un gran ejemplo de esto en el nuevo sitio para La web por delante pódcast. En las páginas de podcasts, las formas CSS se utilizan para curvar el texto alrededor de una imagen circular del invitado.

Puedes ver cómo se ve esto en Chrome a la izquierda. Firefox (a la derecha) aún no es compatible con Shapes, por lo que obtenemos el cuadro cuadrado alrededor de la imagen.

Un usuario de Firefox no sabría que se está perdiendo ese pequeño toque, y no daña la experiencia del sitio si no lo tiene, es más agradable en el apoyo de los navegadores.

Puede ver información completa y actualizada de soporte del navegador en el Puedo usar sitio web. En el momento de escribir este artículo, Safari requiere un prefijo -webkit en las propiedades de CSS Shapes. Mis ejemplos usan el de Lea Verou Prefijo Gratis texto.

Con el nivel 1 de formas en el estado de recomendación candidata, esperamos verlo pronto en todos los navegadores modernos. No hay razón para no comenzar a usarlo para agregar toques finales a sus diseños. Solo asegúrese de realizar la prueba en un navegador sin soporte, especialmente si está superponiendo texto en imágenes donde la falta de soporte podría dificultar la lectura del contenido.

Si desea probar y polyfill Shapes en navegadores no compatibles, el equipo de Adobe Web Platform ha creado un polyfill que está disponible en Github.

Recursos y lectura adicional

En este artículo, he detallado las principales cosas que puede necesitar saber para comenzar a usar CSS Shapes en sus sitios hoy. Para obtener más información, incluida información sobre lo que viene en la especificación de Nivel 2, consulte los siguientes recursos.

Iconos de El Proyecto Noun. Icono de zorro es de Laura Olivares, Icono de sofá por Mr Pixel.