Every time a crack or a hole has to appear on a design, my mind churns up the various logics behind creating a CSS knockout text effect to see if I can reuse any of them.
One of the methods for the knockout text effect uses the CSS property,
mix-blend-mode, to transparentize the text of an element.
I’m not going to explain how
mix-blend-mode works in here as you can read about the same and its use in creating a knockout text effect in this CSS Tricks article.
If you already know how
mix-blend-mode works, then below is the code I used in the demo showcased in this post (at the end) where I’m using
mix-blend-mode to knockout a slanted space over a text to create faux-fragmentation.
On top of an image, I added some text and a white coloured slash, then applied
mix-blend-mode: multiply; to them, causing the white slash to turn transparent and break the text.
pointer-events: none; on the slash so that it doesn’t obstruct the user selection of the text (yes, it’s selectable!)
Note: You can use different textual characters to create different fragment shapes, or to just punch some bizarre shaped holes into a text, just make sure the text remains readable. PS: there’s a wide array of quirky Webdings.