shape-outside
Si queremos poner un icono o una imagen al lado de un texto como si fuera un carácter puede resultar bastante complejo sobre todo el adaptarlo. Para ello, tenemos una serie de propiedades que nos facilitan que una imagen se adapte a un texto como si estuviéramos trabajando con un editor de textos.
La propiedad shape-outside nos sirve para indicarle al navegador que ignore la parte transparente de una imagen y que así se adapte el texto a la imagen. Los valores que puede tomar esta propiedad es shape-outside(none| [<shape-box>] | [<shape-box>] | [<basic-shape>]). Aquí tenemos algunos ejemplos de cómo podemos usarlo con las formas básicas.
shape-outside solo tiene efecto en un elemento que está "flotando", es decir, un elemento que tiene la propiedad float: left; o float: right;.
- Usas float: left; para sacar una imagen del flujo y ponerla a la izquierda.
- Normalmente, el texto fluye alrededor de la caja rectangular de esa imagen.
- Al añadir shape-outside a la imagen, le dices al texto: "Oye, no te ajustes a mi caja, mejor ajústate a este círculo (o esta forma) que te defino".
shape-outside utiliza las mismas funciones de forma básicas que clip-path para definir el "campo de fuerza" que el texto debe rodear.
- circle(): El texto fluye alrededor de un círculo. Ejemplo: shape-outside: circle(50%); (Crea un círculo perfecto en el centro del elemento).
- ellipse(): El texto fluye alrededor de un óvalo. Ejemplo: shape-outside: ellipse(40% 50%); (Un óvalo más alto que ancho).
- polygon(): El texto fluye alrededor de una forma personalizada que defines con puntos (vértices). Ejemplo: shape-outside: polygon(0 0, 100% 100%, 0 100%); (Un triángulo).
- inset(): El texto fluye alrededor de un rectángulo (similar al float normal, pero te permite redondear las esquinas para que el texto se ajuste a ellas). Ejemplo: shape-outside: inset(10px round 20px);
- url(): Esta es la más potente. Puedes usar una imagen con transparencia (PNG), y el texto se ajustará automáticamente a la silueta de la parte opaca de esa imagen. Ejemplo: shape-outside: url('mi-imagen.png');
shape-margin
Junto a esta propiedad, tenemos shape-margin que nos permite darle un margen a la imagen que por ejemplo hemos usado con la propiedad shape-outside. Este margen va a tener en cuenta la forma de la imagen, de tal forma que si tenía alguna forma “especial” el margen se le de teniendo en cuenta su forma. La sintaxis de esta propiedad es shape-margin(<length>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="3.shape-outside.css">
<title>Ejemplo shape-outside</title>
</head>
<body>
<h1>Ejemplo shake it out</h1>
<main>
<h2>Nuestro querido Lorem</h2>
<img class="float-img" src="https://picsum.photos/id/1025/200/200" alt="Perro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
venenatis nisl id massa rhoncus, sed eleifend quam pretium.
Nulla facilisi. Duis vel est nec leo varius accumsan.
Curabitur feugiat, magna ut dictum ultrices, eros lacus
ultrices turpis, non interdum odio nisl non justo.
Suspendisse potenti. Nam nec dictum felis.</p>
<p>Praesent maximus, felis ac interdum ullamcorper,
risus eros facilisis nibh, ut sodales eros ante ut nisl.
Sed nec purus ut quam dictum finibus. Integer ut
turpis nec arcu sollicitudin tincidunt.
Donec nec elit vel justo commodo bibendum.</p>
</main>
</body>
</html>shape-image-threshold
Por último, dentro de este bloque nos encontramos con la propiedad shape-image-threshold, que nos permite indicar el umbral de transparencia (canal alfa) que debe tener cada píxel para considerarse transparente y crear la forma. Esto es muy útil para cuando no nos detecta la transparencia de una imagen. La sintaxis que tiene esta propiedad es: shape-image-threshold(<alpha-value>).
Esta propiedad solo y exclusivamente tiene efecto cuando usas la función url() en shape-outside.
- NO funciona con shape-outside: circle(), polygon(), ellipse(), etc.
- SÍ funciona con shape-outside: url('mi-imagen.png');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="4.shape-image-threshold.css">
<title>Ejemplo shape-outside</title>
</head>
<body>
<h1>Ejemplo shake it out</h1>
<main>
<article id="demo-low">
<h2>Threshold: 0.1 (Forma grande)</h2>
<img class="float-img"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><defs><radialGradient id='grad'><stop offset='0%' stop-color='black' stop-opacity='1'/><stop offset='100%' stop-color='black' stop-opacity='0'/></radialGradient></defs><circle cx='75' cy='75' r='75' fill='url(%23grad)'/></svg>"
alt="Círculo difuminado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
venenatis nisl id massa rhoncus, sed eleifend quam pretium.
Nulla facilisi. Duis vel est nec leo varius accumsan.</p>
</article>
<article id="demo-high">
<h2>Threshold: 0.9 (Forma pequeña)</h2>
<img class="float-img"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><defs><radialGradient id='grad'><stop offset='0%' stop-color='black' stop-opacity='1'/><stop offset='100%' stop-color='black' stop-opacity='0'/></radialGradient></defs><circle cx='75' cy='75' r='75' fill='url(%23grad)'/></svg>"
alt="Círculo difuminado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
venenatis nisl id massa rhoncus, sed eleifend quam pretium.
Nulla facilisi. Duis vel est nec leo varius accumsan.</p>
</article>
</main>
</body>
</html>propiedad clip-path
Antiguamente teníamos la propiedad (hoy en día obsoleta) clip para hacer recortes, hoy en día ha sido reemplazada por clip-path que nos permite recortar y ocultar la parte que no queremos. La sintaxis que se emplea es: clip-path(none | <basic-shape> | <clip-source>). Cuando hablamos de clip-source, estamos haciendo referencia a una url que referencia a un elemento SVG. Encontramos un ejemplo usando clip-path aquí.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip path</title>
<link rel="stylesheet" href="5.clip-path.css">
</head>
<body>
<h1><code>clip-path</code> con y sin <code>object-fit</code></h1>
<p>La imagen original es rectangular (400x200).</p>
<main>
<article>
<h2>Sin <code>object-fit</code></h2>
<img class="demo-img" id="img-deformada" src="https://picsum.photos/id/1060/400/200"
alt="Imagen rectangular deformada">
</article>
<article>
<h2>Con <code>object-fit: cover</code></h2>
<img class="demo-img" id="img-correcta" src="https://picsum.photos/id/1060/400/200"
alt="Imagen rectangular correcta">
</article>
</main>
</body>
</html>