CSS Shapes: How to Line up Images and Texts

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

En aplicaciones como InDesign o QuarkXPress, dejar que las letras fluyan a lo largo de las rutas es un estándar establecido desde hace mucho tiempo para alinear imágenes y texto. Con CSS3 CSS Shapes te permite crear el mismo comportamiento en el navegador. Para hacerlo, puede definir las rutas que se supone que debe seguir el texto, así como definir imágenes recortadas, a lo largo de las cuales debe colocarse el texto.

Definición de círculos, elipses y polígonos para un contorno

Si desea crear un contorno de texto con rutas simples, primero necesita un elemento al que seguirá el texto. Aquí, lo que desea definir es un contenedor «

» para el que debe definir un ancho y un alto, así como el atributo «flotante», que garantiza que el siguiente texto irá junto al elemento.

<div></div>
<p>Lorem ipsum …</p>

Hasta ahora, tienes un elemento rectangular clásico. Usando el atributo de forma «forma exterior», ahora define una ruta que crea 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 del 50 por ciento. 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 textosEl texto fluye alrededor de un círculo simple

En el segundo ejemplo, el centro está a 50 píxeles de la izquierda ya 100 píxeles del borde superior del elemento. Por cierto, «forma exterior» 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 elipses, para las cuales ingresa dos radios.

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

Las rutas definidas a través de «forma exterior» no necesitan cubrir todo el espacio del elemento. También pueden ser significativamente más pequeños. El texto se orientará únicamente a lo largo de esta ruta e ignorará por completo el tamaño real del elemento «

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

div {
  shape-outside: polygon(150px 0, 179px 41px, 225px 20px, …);
}

Usar 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 necesita dibujar la forma de la imagen con un camino. Simplemente puede usar «forma exterior» 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.

<img src="https://www.noupe.com/design/rose.png" />
<p>Lorem ipsum …</p>

En el ejemplo, se establece una imagen en lugar de un simple contenedor «

«, mientras que «float» se usa 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 «forma exterior» mediante «url()».

div {
  float: left;
  shape-outside: url("https://www.noupe.com/design/rose.png");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}

Formas CSS: cómo alinear imágenes y textosImagen recortada con texto flotando a su alrededor

El atributo adicional «umbral de imagen de forma» determina cuánta transparencia se necesita para que se considere para el contorno del texto. El valor 0 significa que solo se consideran las áreas que son 100 por ciento transparentes. En el ejemplo, se acepta una transparencia de más del 50 por ciento. Además, el atributo «margen de forma» se utiliza para definir la distancia entre la imagen y el texto. De esta manera, puede crear rápidamente contornos de texto, lo que antes solo era posible en las aplicaciones de diseño.

Extensión de Chrome para formas CSS

Formas CSS: cómo alinear imágenes y textosLa extensión de Chrome complementa la pestaña «Formas»

Si desea poder cambiar el tamaño y la ubicación de las formas CSS directamente dentro del navegador, puede usar la extensión de cromo «Editor de formas CSS». Una vez instalado, encontrará una pestaña llamada «formas» en la sección «elementos» de sus herramientas de desarrollador. Al elegir un elemento marcado con «forma exterior», verá este atributo en la pestaña «formas».

Formas CSS: cómo alinear imágenes y textosDibujar formas directamente dentro del navegador

En el navegador, el área de la ruta, que normalmente es invisible, se resalta en color. También puede cambiar el tamaño y la posición de la ruta o crear otras nuevas. Esto le permite agregar un polígono y dibujarlo en el navegador. Luego, simplemente copie los valores de la forma e ingréselos en su código fuente. Si está utilizando el editor gratuito Brackets, que hemos presentado (entre otros) en este artículo, también puede usar una expansión que le permite crear y editar cómodamente formas CSS aquí. Puede encontrar una demostración impresionante sobre cómo usar formas CSS en Adobe: Alicia en el país de las Maravillas.

Compatibilidad con navegador

Actualmente, Chrome, Safari y Opera admiten el atributo «forma exterior». Firefox, Internet Explorer y Edge aún no pueden funcionar con formas CSS.

(dpe)

#Formas #CSS #cómo #alinear #imágenes #textos

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *