Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Awesome UI Interactions with the CSS Clip Path Property

Started by -  |  Views: 25 | Comments: 0   

Hey all! Today, we're going to take a close look at the CSS clip-path property. Specifically, we'll take a look at 3 different examples of how to use clip-path to create a micro interaction that reveals a card of information.

User Feedback

  • Similar Content

    • By ©Jimi Wikman
      Today we are going to create an SVG animation using stroke dash array and stroke dash offset to create some really cool effects.
      We only need HTML and CSS for this effect. You can create the shapes and texts with Figma, Adobe XD or Adobe Illustrator.
      Let me know if you want to see more complex SVG animations with tools like bodymoving/lottie.
      Try to get creative and apply the path animations to different kinds of texts, shapes,etc.
    • By ©Jimi Wikman
      Top 10 Stunning CSS 3 Effects For Navigation Bar.
    • By ©Jimi Wikman
      Today, we're going to check out how to create a custom SVG checkbox that animates on click. We'll use Chromevox to ensure it's accessible as well. First, we'll hop into Adobe Illustrator (although, you can use any vector-capable software) to design the icon, then we'll define the HTML and CSS. There's a tiny bit of JavaScript as well, to toggle and reverse the animation.
    • By ©Jimi Wikman
      Today, we're taking a look at how to use Editor.js, which provides you with a block styled content editor for use within custom CMS's and more. It outputs clean JSON styled output instead of raw HTML like traditional alternatives. We'll take a look at how to install and how to use it.
  • Create New...