Today I Learned - Rocky Kev

TIL clip-path and shape-outside

POSTED ON:

TAGS: css image shape

You know how you can shape a picture into a circle, and then wrap text around it?

You can do that with two features.

clip-path

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

For example:
Rather than round a circle by using a border-radius, you can instead clip-path: circle(40%).

shape-outside

You can then have content wrap around it using the shape-outside css.

mdn - clip-path
mdn - shape-outside

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)')