CSS Shapes: Cómo alinear texto e imágenes

Con CSS3, las formas CSS te permiten crear un efecto que deja que las letras fluyan a lo largo de rutas, líneas rectas imaginarias e incluso curvas alineándose con imágenes de forma muy sencilla. Para hacerlo, puedes definir las rutas que se supone que debe seguir el texto, así como definir las imágenes recortadas, en las que el texto debe colocarse.

Formas CSS: Cómo alinear imágenes y textos

Definición de círculos, elipses y polígonos para un esquema
Si deseas crear un contorno de texto con rutas simples, primero necesitas un elemento que siga el texto. Aquí, lo que se desea definir es un contenedor »

» para el que necesita definir un ancho y una altura, así como el atributo «float», que se asegura de que el siguiente texto vaya junto con el elemento.


<div> >Lorem ipsum ...</div>

Hasta ahora, tienes un elemento rectangular clásico. Ahora podemos definir un contenedor «shape-outside» creando así el contorno del texto en lugar de la forma rectangular.div {
width: 300px;
height: 300px;
float: left;
shape-outside: circle(50%);
}

En el ejemplo, el círculo se define con un radio de 50%. Además, también puede determinar el centro del círculo si no desea que esté en el centro del elemento.

div {
shape-outside: circle(50% at 50px 100px);
}

 

Formas CSS: Cómo alinear imágenes y textos

Texto fluyendo alrededor de un círculo simple

En el segundo ejemplo, el centro está a 50 píxeles de la izquierda y 100 píxeles del borde superior del elemento. Por cierto, «shape-outside» solo crea una ruta para el contorno del texto. Por ejemplo, si asigna un color de fondo al elemento “

”, se aplicará a la forma rectangular del elemento, no al círculo.

En lugar de círculos, también son posibles las elipsis, para las cuales ingresas dos radios.

div {

shape-outside: circle(50% at 50px 100px); }

Las rutas definidas a través de «shape-outside» no necesitan cubrir todo el espacio del elemento.

Puede crear un polígono, para el que necesita definir los pares de coordenadas separados entre sí por comas, para formas más complejas.

div {
shape-outside: polígono (150px 0, 179px 41px, 225px 20px, ...);
}

 

Uso de imágenes como formas

En muchos casos, desea que su texto fluya alrededor de una imagen recortada en lugar de una forma geométrica simple. Para hacer eso, no es necesario dibujar la forma de la imagen con una ruta. Simplemente puede usar “shape-outside” para transferir directamente una imagen recortada. Los únicos requisitos son que la imagen tenga un canal alfa y que el área alrededor del objeto recortado sea transparente.

En el ejemplo, se establece una imagen en lugar de un simple contenedor < div >, mientras que se usa «float» para garantizar que el siguiente texto fluya a lo largo de la ruta. No es una forma geométrica, pero la dirección de la imagen se asigna al atributo «shape-outside» a través de «url ()».

div {
float: left;
shape-outside: url(«imagen-con-texto-alrededor.png»);
shape-image-threshold: 0.5;
shape-margin: 10px;
}

Deja un comentario