Today I Learned - Rocky Kev

TIL Shape-Outside to wrap text

POSTED ON:

TAGS: css shapes codepen

Shape-outside is a CSS property that allows setting shapes.
It also helps define areas where text flows!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

Shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.


.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

See the Pen shape-outside by omgzui (@OMGZui) on CodePen.

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')