Search

Nalezeno "clip-path": 46

Let’s Create an Image Pop-Out Effect With SVG Clip Path


Few weeks ago, I stumbled upon this cool pop-out effect by Mikael Ainalem. It showcases the clip-path: path() in CSS, which just got proper support in most modern browsers. I wanted to dig into it myself to get … The post Let’s Create an Image Pop-Out Effect With SVG Clip Path appeared first...

Shape Slideshow with Clip-path


An experimental slideshow using clip-path to create shape transitions between slides. The post Shape Slideshow with Clip-path appeared first on Codrops

clipPath vs. mask


These things are so similar, I find it hard to keep them straight. This is a nice little explanation from viewBox (what a cool name and URL, I hope they keep it up). The big thing is that clipPath (the element in SVG, as well as clip-path in CSS) is vector and when it is applied, whatever you...

How to Make an Area Chart With CSS


You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine a line chart with the bottom area filled in), particularly any in HTML and CSS alone. In this...

Background Scale Hover Effect with CSS Clip-path


A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path. Background Scale Hover Effect with CSS Clip-path was written by Mary Lou and published on Codrops

Unfortunately, clip-path: path() is Still a No-Go


I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the one below with just one HTML element and very little CSS without needing SVG or a huge list of points inside the polygon function! Chris...

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


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...

The Amazingly Useful Tools from Yoksel


I find myself web searching for some tool by Yoksel at least every month. I figured I'd list out some of my favorites here in case you aren't aware of them. Need to duo-tone an image? SVG filters can do that. Lentie Ward wrote about it for us, and Yoksel has a tool to create the filters...

Pac-Man… in CSS!


You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko) ...

Float Element in the Middle of a Paragraph


Say you want to have an image (or any other element) visually float left into a paragraph of text. But like... in the middle of the paragraph, not right at the top. It's doable, but it's certainly in the realm of CSS trickery! One thing you can do is slap the image right in the middle of...

Weaving One Element Over and Under Another Element


In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The Bible Project’s website. They make really cool animations, and...

Clipping, Clipping, and More Clipping!


There are so many things you can do with clipping paths. I've been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with the CSS clip-path...

The Many Ways to Link Up Shapes and Images with HTML and CSS


Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only...

Various Methods for Expanding a Box While Preserving the Border Radius


I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back. Expanding box effect on the CodePen homepage. Being the curious creature that I am, I had to check how this works! Turns out, the rectangle...

A Glassy (and Classy) Text Effect


The landing page for Apple Arcade has a cool effect where some "white" text has a sort of translucent effect. You can see some of the color of the background behind it through the text. It's not like knockout text where you see the exact background. In this case, live video is playing underneath....

Animating with Clip-Path


clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes...

Restricting a (pseudo) element to its parent’s border-box


Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent's border-box? In case you're having trouble picturing what that looks like, let's say we wanted to get the following result with minimal markup and avoiding brittle CSS. The desired result. This...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace