Sea creativo con la forma en forma | Tricks CSS

Último tiempoPregunté: «¿Por qué tantos artículos de formato largo se sienten planos visualmente?» Le expliqué:

«Las imágenes en contenido a largo plazo pueden (y a menudo) hacer más que una simplemente descripción. Pueden dar forma a la navegación, la interacción e interpretación de las personas de lo que leen. Ayudan a establecer el ritmo, influir en los sentimientos del lector y agregar personajes que se transmiten individualmente».

Luego hablé sobre la posibilidad de expresión de formas CSS y cómo usar shape-outsidePuede envolver el texto en el canal alfa de la imagen para aumentar la energía del diseño y mantenerlo vívido.

Hay muchas oportunidades creativas shape-outside Me sorprendió que lo vi rara vez usado. Entonces, ¿cómo lo usas para agregar personalidad a tu diseño? Eso es lo que hago.

Mi perfil: Patty Meltt es una floreciente sensación de música country y necesita un sitio web para lanzar su nuevo álbum y viaje. Ella quería que se viera único y memorable, así que llamó Cosas y tonterías. Patty no es real, pero el desafío de diseñar y desarrollar un sitio web como ella es.

mayoría shape-outside Mago Comience con círculos y polígonos. Esto es útil, pero solo responde cómo. Los diseñadores necesitan Por qué – De lo contrario, esta es solo otra propiedad CSS.

No importa qué forma tome su tema, cada imagen se encuentra dentro de la caja. Por defecto, el texto fluye por encima o por debajo del cuadro. Si flote la imagen hacia la izquierda o hacia la derecha, el texto se envuelve alrededor del rectángulo independientemente del contenido en el interior. Ese es el límite shape-outside superar.

shape-outside Estas cajas se pueden eliminar habilitando diseños que pueden responder a los contornos de la imagen. La transición de la imagen en el cuadro para permitir que el contenido de la imagen defina la composición es la razón de su uso shape-outside Tan interesante.

Un bloque sólido que rodea una imagen de ángulo recto puede sentirse estático. Pero, las palabras que doblaban o dobladas alrededor de la guitarra producen movimientos, lo que hace que la historia sea más atractiva y atractiva.

CSS shape-outside Habilite el texto que fluya alrededor de cualquier forma personalizada, incluido el canal alfa de la imagen (es decir, área transparente):

img {
  float: left;
  width: 300px;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-image-threshold: .5;
  shape-margin: 1rem;
}

Primero, una revisión rápida.

Para que el texto fluya alrededor de los elementos, necesitan float Izquierda o derecha, están las suyas width definición. este shape-outside URL selecciona una imagen con un canal alfa, como PNG o WebP. este shape-image-threshold La propiedad establece el umbral de canal alfa para crear formas. Finalmente, hay shape-margin Cree o no los atributos crean espacio alrededor de la forma.

El ejemplo interactivo de este artículo es Disponible en mi laboratorio.

Múltiples formas de imagen

Cuando agrego imágenes a una publicación larga, me pregunto: «¿Cómo ayudan a dar forma a la experiencia de alguien?» El texto que fluye alrededor de la imagen puede hacer que las personas se sientan un poco más bajas, lo que hace que su experiencia sea más inmersiva. Visualmente, lleva texto e imágenes a una relación más cercana, haciéndolos sentir una composición compartida en lugar de elementos aislados.

La historia de la vida de Patty, desde el canto hasta el canto y los titulares, contiene dos partes: música sobre ella y otra música sobre ella. Agregué una imagen vertical alta a su biografía y dos portadas de álbumes más pequeñas a mi columna de música:

<section id="patty">
  <div>
    <img src="https://css-tricks.com/getting-creative-with-shape-outside/patty.webp" alt="">
    (...)
  </div>

  <div>
    <img src="https://css-tricks.com/getting-creative-with-shape-outside/album-1.webp" alt="">
    (...)
    <img src="https://css-tricks.com/getting-creative-with-shape-outside/album-2.webp" alt="">
    (...)
  </div>
</section>

Entonces, una cuadrícula simple crea dos columnas:

#patty {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5rem;
}

Me gusta hacer que mi diseño sea lo más flexible posible, por lo que en lugar de especificar el ancho de la imagen y los márgenes en los píxeles estáticos, elegí el porcentaje de estos anchos de columna, por lo que su tamaño real es relativo al tamaño del contenedor:

#patty > *:nth-child(1) img {
  float: left;
  width: 50%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/album-1.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(2) {
  float: right;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/album-2.webp");
  shape-margin: 2%;
}

Ahora el texto fluye a través del gráfico alto de Patty sin rutas o polígonos, que es solo el contorno natural de su imagen que moldea el texto.

Cuando la imagen se gira usando CSS transformIdealmente, el navegador renovará el texto alrededor de su canal alfa giratorio. Lamentablemente, no lo hacen, por lo que generalmente es necesario rotarlo en la imagen.

shape-outside Con imágenes centradas en artificial

Para que el texto fluya alrededor de los elementos, deben flotar hacia la izquierda o la derecha. Poner la imagen en el centro del texto hará que el diseño biográfico de Patty sea aún más convincente. Pero no center El valor del flotador, entonces, ¿cómo es esto posible?

El contenido biológico de Patty se divide en dos columnas simétricas:

#dolly {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Para crear la ilusión de texto que fluye en ambos lados de la imagen, primero lo dividí en dos partes: una para la izquierda y la otra para la derecha, la mitad o el 50% del ancho original.

Luego puse una imagen en la columna izquierda y la otra imagen a la derecha:

<section id="dolly">
  <div>
    <img src="https://css-tricks.com/getting-creative-with-shape-outside/patty-left.webp" alt="">
    (...)
  </div>
  
  <div>
    <img src="https://css-tricks.com/getting-creative-with-shape-outside/patty-right.webp" alt="">
    (...)
  </div>
</section>

Para dar el flujo de texto a ambos lados de una sola imagen, flote la mitad de la columna izquierda hacia la derecha:

#dolly > *:nth-child(1) img {
  float: right;
  width: 40%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-left.webp");
  shape-margin: 2%;
}

… y la mitad izquierda de la columna derecha para que ambas mitades de la imagen de Patty se combinen en el medio:

#dolly > *:nth-child(2) img {
  float: left;
  width: 40%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-right.webp");
  shape-margin: 2%;
}

Imagen de fondo artificial

Mi diseño de la biografía de Patty hasta ahora incluye un retrato cortado con un canal alfa bien definido. Sin embargo, a menudo necesito hacer un diseño que se sienta más suelto y más natural.

Por lo general, uso la imagen como un background-imagepero para este diseño, quiero que el contenido fluya libremente alrededor de Patty y su guitarra.

Así que inserté la imagen de Patty en la imagen en línea, la floté y establecí su ancho en 100%.

<section id="kenny">
  <img src="https://css-tricks.com/getting-creative-with-shape-outside/patty.webp" alt="">
  (...)
</section>

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
}

Podría usar dos formas de escribir sobre Patty y su guitarra. Primero, podría editar la imagen, eliminar partes no esenciales para crear canales alfa de borde suave. Entonces, puedo usar shape-image-threshold Propiedades para controlar qué partes del canal alfa forman el esquema utilizado para el envoltorio de texto:

#kenny > img {
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty.webp");
  shape-image-threshold: 2;
}

Sin embargo, este enfoque es destructivo ya que se eliminan muchas de las texturas detrás de Patty. En cambio, creé un polígono clip-path y aplicarlo a shape-outsideque el texto fluye mientras conserva todos los detalles de mi imagen original:

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
  shape-outside: polygon(…);
  shape-margin: 20px;
}

Tengo poco tiempo para escribir caminos de polígono a mano, así que confío en Bennett Feely’s Fabricante de CSS Clipper. Agregué mi URL de imagen, dibujé formas de polígono personalizadas y copio clip-path Mis valores shape-outside propiedad.

Texto entre formas

A Patty Meltt le encanta empujar los límites de la música country, y quiero hacer lo mismo con su diseño de biografía. Planeo fluir texto entre dos acentos de luz, donde los elementos se superponen y una parte de la imagen se desborda desde el contenedor para crear profundidad.

Así que hice dos montajes con canales α de forma irregular.

Puse ambas imágenes encima del contenido:

<section id="johnny">
  <img src="https://css-tricks.com/getting-creative-with-shape-outside/patty-1.webp" alt="">
  <img src="https://css-tricks.com/getting-creative-with-shape-outside/patty-2.webp" alt="">
  (…)
</section>

… y usa la misma URL de imagen que el valor shape-outside:

#johnny img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("https://css-tricks.com/getting-creative-with-shape-outside/patty-1.webp");
  shape-margin: 2%;
}

#johnny img:nth-of-type(2) {
  float: right;
  width: 35%;
  shape-outside: url("img/patty-2.webp");
  shape-margin: 2%;
}

Ahora, el contenido fluye como un río en una canción country, y está lleno de energía y movimiento entre dos montajes de imagen.

en conclusión

Las imágenes en contenido de forma larga finalmente están en caja y aisladas, como si se pensara más tarde. Forma de CSS, especialmente shape-outside – Danos la oportunidad de tratar imágenes y texto como parte de la misma composición.

Esto es importante porque el diseño es más que solo poner las cosas disponibles. Se trata de dar forma a los sentimientos de las personas. Reduzca la velocidad a los lectores envolviendo el texto en las curvas de la guitarra o los bordes del retrato, invitándolos a demorarse y haciendo que su experiencia sea más inmersiva. Trae el ritmo y la personalidad al punto de que de lo contrario podría sentirse plano.

Entonces, la próxima vez que busque el rectángulo, pare y piense en cómo shape-outside Puede ayudar a convertir una página normal en algo memorable.