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.
Very cool! Looks great.
I know Chris is aware and this isn’t an accessibility post, but for anyone that’s wondering about accessibility, add
aria-label="His Dark Materials", since the pseudo elements would make screen readers read it 3X.My bad, I see there is a link to an article which includes the accessibility consideration.
On top of that, you could set the CSS
contentproperty toattr(aria-label)to cover both accessibility and pseudo content in one attribute.