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

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

At 3/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 →

حقوق التأليف والنشر

نحن نحترم حقوق الملكية للآخرين ونحرص دائمًا على عدم التعدي على حقوقهم، لذا يحق للمؤلفين ودور النشر المطالبة بإزالة رابط تحميل مقال أو كتاب من الموقع. إذا وجدت مقالاً أو كتاباً خاصاً بك ولم توافق على نشر رابط التحميل أو كان لديك اقتراح أو شكوى راسلنا عبر تواصل معنا, أو عن طريق البريد الإلكتروني في: support@freewsad.com.

المزيد عنا