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

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 to Article — Permalink

The post Re-creating the ‘His Dark Materials’ Logo in CSS appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2OQTwUP
via IFTTT