About Us Pop-Out Effect

Cool demo that uses clip-path: path(…);, a feature that recently shipped with Chromium, making it supported in all three major rendering engines.


See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.

Peeking under the hood – using the SVG Path Visualizer — you can see that it’s the .container-inner that is clipped not in a circular way, but a vertical rectangle with a circular bottom. The photo of the person itself already is transparent and using scale and translate the pop-out effect is created.

Understanding CSS clip-path

Ahmad Shadeed is at it again, this time covering CSS clip-path.

In this article, I aim to provide you with a clear explanation of how clip-path works in detail when to use it, and how you can use it today in your web development projects. Are you ready? Let’s dive in.

As per usual: tons of examples and nice accompanying visuals.

Understanding Clip Path in CSS →

💡 To easily create Polygon Clip Paths, Clippy will come in handy.

Crafting a Cutout Collage Layout with CSS Grid and clip-path

On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say:

What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.

See the Pen Magazine Cutout by Bramus (@bramus) on CodePen.

I’ve only cut out a few parts, but you get the idea. The parallax part as seen in the original is left as an exercise to you, dear reader 😛

🚧 A big help in creating these cutouts was the Shape Path Editor which you can find in Firefox’ DevTools. Without it such a task would have been really difficult.

Chameleonic Header

UPDATE 2021.01.14: Besides using clip-path, a more easy approach is to use mix-blend-mode: difference; if all you’re doing is inverting colors.

Ever had a fixed header that had to work with both light and dark content shown underneath it? Keep an eye at the header in the video below to see what I’m talking about:

As explained over at CodyHouse, here’s how it’s done:

This effect uses the clip-path CSS property. The idea is to have a clone of the main header inside each <section> of the page. Each clone will inherit the style of the section it belongs to.

All cloned headers are placed at the top of the page (with a fixed position). The clip-path property can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.

This creates the clipping transition effect between headers with different color themes.

Chameleonic Header Article →
Chameleonic Header Demo →

Clippy – CSS clip-path Maker

Handy tool to creating shapes to use with the clip-path CSS property. Comes with some easy to use predefined shapes.

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

See the previously linked CSS Shapes, Clipping and Masking for a few more examples

Clippy – CSS clip-path Maker →

CSS Shapes, Clipping and Masking

The release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path.

clip-path is a property that allows us to clip (i.e., cut away) parts of an element. Up until now, in Firefox you could only use an SVG to clip an element:

But with Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons!, circles, ellipses and polygons!

Do note that clipping is different from masking. Masking just hides some content – leaving the bounding box unaltered – clipping actually cuts away things:

CSS Shapes, Clipping and Masking →

Reverse clip path with blend modes

Nice example on applying an SVG-defined clipPath using CSS. Note that’s it no simple triangle in the example, but a triangle with an inner triangle cut out, created using the reverse clip path approach by Ana Tudor.

The gif and the extra background-blend-mode: screen; also give it a nice touch 🙂

Reverse clip path with blend modes →
Cutting out the inner part of an element using clip-path