Design Lance

Latest trends in arts and design

  • Design
  • News

Categories

  • Design

Recent Posts

  • useStateInCustomProperties
  • What if you could cut your hosting costs by 80%? Webiny Serverless CMS makes it possible.
  • How to Play and Pause CSS Animations with CSS Custom Properties
  • The types of websites you can create with WooCommerce
  • Scrollbars on Hover

Tags

2020 about Accessibility Animations Been Build Building Code color Components Create Creating Custom Design development element Elements from Frontend Grid HTML Images into I’ve JAMstack JavaScript Layout like Making Netlify News Notion Performance Personal Personally Platform Professionally Properties React Responsive Site Text using 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

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