A rather geeky/technical weblog, est. 2001, by Bramus
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 …
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 …
Nice little demo by Josh W. Comeau in which he uses clip-path to create a folded corner. It even animates on hover 🙂
clip-path
Reminds me of Eric Meyer’s Flexible Captioned Slanted Images in which he combines Flexbox and CSS clip-path. In that implementation Eric did have to correct the margins to fix the gap between the items. With the grid implementation this looks like to be no problem.
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 …
Continue reading “Crafting a Cutout Collage Layout with CSS Grid and clip-path“
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: …
clip-path, and writing-modeclip-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, …
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 …
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 …