Design Lance

Latest trends in arts and design

  • Design
  • News

Categories

  • Design

Recent Posts

  • Generating (and Solving!) Sudokus in CSS
  • Building a Settings Component
  • Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
  • Why Netlify?
  • Cloud study

Tags

about Accessibility Animations Been Build Building Code color Components Create Creating Custom Design development element Elements from Frontend Grid HTML Image Images into I’ve JAMstack JavaScript Layout Making Netlify News Notion Performance Personal Personally Platform Professionally Properties React Responsive Site Text using Website Weekly WordPress

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

Posted on January 11, 2020 in Design

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.

CSS-Tricks

Comments

comments

Download WordPress Themes
Download WordPress Themes
Download Best WordPress Themes Free Download
Download WordPress Themes Free
online free course
download samsung firmware
Download WordPress Themes
‘His, Dark, Logo, Materials’, Recreating
© 2021 Kingdom
Powered by BestWebLayout and WordPress
21