Re-creating the ‘His Dark Materials’ Logo in CSS
Publikováno: 11.1.2020
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 … Read article
The post Re-creating the ‘His Dark Materials’ Logo in CSS appeared first on CSS-Tricks.
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.