Flotar un elemento en la esquina inferior | Programar Plus

¿Necesita colocar un elemento a la derecha oa la izquierda, de modo que el texto lo envuelva? Esa es una tarea fácil para el float propiedad. Pero, ¿qué pasa si también desea empujar ese elemento (llamémoslo una imagen) a una de las esquinas inferiores mientras estamos en eso? Suena un poco complicado, ¿verdad? ¿Probablemente necesitemos JavaScript?

No, ¡pocas líneas de CSS (complicado) pueden hacerlo! Aquí está la solución solo de CSS que hará que su imagen se adhiera a la esquina inferior, independientemente del tamaño y el contenido.

Cambie el tamaño del elemento contenedor y vea cómo funciona la magia:

Analicemos el código.

Marcado y diseño

Necesitaremos un elemento contenedor para contener todo, y usaremos flexbox en él. Flexbox nos permite confiar en el predeterminado stretch alineación para poder utilizar posteriormente height: 100%.

<div class="wrapper">
  <div class="box">
    <div class="float"><img></div>
    Lorem ipsum dolor ...
  </div>
</div>

.wrapper {
  display: flex;
}

.float {
  float: right;
  height: 100%;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 100px) 0 0);
}

El .box dentro de .wrapper es nuestro artículo flexible. No necesitamos ningún CSS en particular aplicado a la caja. Define la altura de la envoltura y, al mismo tiempo, se estira a la misma altura. Este comportamiento nos dará una “altura de referencia” que pueden utilizar los elementos secundarios.

De la especificación:

Si el artículo flexible tiene align-self: stretch, rehaga el diseño de su contenido, tratando este tamaño usado como su tamaño cruzado definido para que los niños de tamaño porcentual puedan resolverse.

La palabra clave es el definido que nos permite utilizar de forma segura un porcentaje (%) altura dentro del elemento de caja.

Ahora para el elemento flotante

Nuestra .float el elemento tomará el completo altura junto al contenido del texto, gracias al cálculo de altura que detallamos anteriormente. Dentro de este elemento empujamos la imagen hacia abajo usando la alineación flexbox.

La imagen flota hacia la derecha, pero el espacio libre encima evita que el contenido se enrolle a su alrededor.

Ahora para el truco real, usando el shape-outside propiedad. Así es como MDN lo define:

La propiedad de CSS de forma exterior define una forma, que puede no ser rectangular, alrededor de la cual debe ajustarse el contenido en línea adyacente. De forma predeterminada, el contenido en línea se ajusta a su cuadro de margen; shape-outside proporciona una forma de personalizar este ajuste, lo que permite ajustar el texto alrededor de objetos complejos en lugar de simples cuadros.

En otras palabras, shape-outside establece la forma en que el contenido fluye alrededor del cuadro delimitador de un elemento.

Se necesitan varios valores. Uno de esos es el inset() función que, de nuevo, según MDN:

Define un rectángulo insertado. Cuando se proporcionan los primeros cuatro argumentos, representan las compensaciones superior, derecha, inferior e izquierda desde el cuadro de referencia hacia adentro que definen las posiciones de los bordes del rectángulo insertado.

Entonces, con shape-outside: inset(calc(100% - X) 0 0) podemos crear un rectángulo insertado que comience exactamente en la parte superior de la imagen. Y la cima es igual a 100% - X, donde X es la altura de la imagen y 100% es la altura del .float elemento. Esto permite que el texto se ajuste dentro del espacio libre en la parte superior de la imagen. Esto es sensible, además, podemos cambiar fácilmente entre izquierda y derecha (ajustando el float propiedad)

¡Eso es! La única advertencia importante es que necesita conocer la altura de la imagen.

¿Quieren más?

Podemos ampliar este concepto un poco más para dar cuenta de situaciones más sofisticadas. Por ejemplo, podemos hacer flotar la imagen a la derecha, pero fijarla en el medio del cuadro con justify-content: center: y también ajustamos nuestro rectángulo insertado en el medio cambiando el shape-outside desde inset(calc(100% - X) 0 0) a inset(calc(50% - X/2) 0 0)

También podemos hacer flotar dos imágenes en ambas esquinas inferiores:

Nada complejo aquí. Simplemente estoy usando el mismo elemento flotante dos veces, una a la derecha y otra a la izquierda. ¿Y por qué detenernos en dos esquinas cuando podemos colocar imágenes en las cuatro esquinas?

La misma idea básica está en juego aquí, pero también confiamos en la función de flotación común para las imágenes superiores. Sin embargo, notará que aquí es donde el concepto comienza a descomponerse un poco, y obtenemos un desbordamiento no deseado según el tamaño de la caja que lo contiene. Podemos hacer la altura del .float elemento superior al 100% y aplique algo “números mágicos” que suavizan las cosas ajustando el relleno y el margen de las imágenes.

Sabía usted que shape-outside acepta radial-gradient() como valor? Podemos usar eso para colocar imágenes redondeadas como a continuación:

La parte transparente del degradado es el espacio libre donde puede ir el texto. Es posible que haya notado que aplicamos un border-radius a la imagen también. El shape-outside la propiedad simplemente afectará a la .float elemento y necesitamos ajustar manualmente la forma de la imagen para seguir la forma definida por shape-outside.

Ya que estamos en eso, combinemos esto con nuestro ejemplo anterior que fija la imagen al centro vertical del cuadro usando justify-content: center:

Otro radial-gradient() y tambien otro border-radius configuración.

Podríamos haber usado un linear-gradient() en lugar de hacer una forma triangular para el área de envoltura:

Esta es la misma idea que usamos para el radial-gradient(). La gran diferencia es que estamos usando clip-path en vez de border-radius para cortar nuestra imagen.

Y, como lo hicimos por los demás, usemos el justify-content: center idea de fijar la imagen en el centro vertical del borde derecho de la caja:

Usamos un conic-gradient() en la demostración anterior con shape-outside para definir la forma triangular y clip-path para obtener una forma similar en la imagen

Todos estos ejemplos aún se pueden optimizar usando menos código en el caso de que la imagen sea decorativa (cuando no se necesita dentro del HTML para fines de SEO). Reemplacemos el .float elemento con un pseudo-elemento y aplique la imagen como fondo en su lugar:

Estamos usando mask para mostrar solo la parte de la imagen que necesitamos y, adivinen qué, usa el mismo valor que shape-outside! Entonces, todo lo que tuvimos que hacer es definir un valor para la forma.

¡Eso es!

Aquí hay muchas posibilidades para colocar no solo rectángulos en las esquinas, sino cualquier tipo de forma en cualquier posición, utilizando en gran medida la misma estructura de código. Solo necesitamos:

• Ajustar el shape-outside propiedad para definir la forma
• Aplique algo de estilo a la imagen para seguir la forma definida previamente o aplique el mismo valor a mask en caso de que estemos usando la versión del pseudo elemento

Entonces todo se mantiene en su lugar, incluso en diseños receptivos.