Re-creating the ‘His Dark Materials’ Logo in CSS

Programming - Mar 31, 2024

The text logo has a slash cut through the text. You set two copies on top of one another, cropping both of them with the clip-path property.

What’s interesting to me is how many cool design effects require multiple copies of an element to do something cool. To get the extra copy, at least with text, we can sometimes use a pseudo-element. For more elaborate content, there is an element() function in CSS, but it’s limited to a prefixed property in Firefox. Still, it enables awesome stuff, like making a mini-map of long content.

You can style it differently with a pseudo-element, which was useful here. Might be cool to see a way to clone elements on a page and apply styling all through CSS… someday.

See the Pen
His Dark Materials TV series logo with CSS
by Michelle Barker (@michellebarker)
on CodePen.

Direct Link →

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More