Parts that are inside the region are shown, while those outside are hidden.Ĭonsider the circle shape provided by clip-path. The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Just for a quick explanation as to what the clip-path is and what it provides, MDN describes it like this: I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.īut first, let’s do a quick recap of what we’re working with. We’re going to dive right into clip-path in this article, specifically looking at how we can use it to create pretty complex animations. 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 in certain ways. There are plenty of issues tagged with web-animations-1 and web-animations-2.Clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. If there’s something you want to do which can’t be done, you can also join in the discussion in the CSSWG Github repository. I highly encourage everyone to play around with CSS animation properties more. I wrote that one up in Figuring out CSS animation properties with a magic kittencorn.īut there’s really quite a lot that can be done. I myself only discovered them in depth a couple years ago when I tried to animate the unofficial Talk.CSS mascot, Kittencorn. And even though you might not be able to do really complex line animations with only CSS alone, I find that there a number of animation properties that most people hardly ever use. ![]() Personally, building out animations with CSS is really fun. See the Pen Bling button ✨ by Chen Hui Jing ( CodePen. If you’re interested to see the full code in action, here’s the Codepen: Depending on the design, you could even use an SVG as a background image for the sweep shape instead of a vertical line. This is why it would be good to work with a motion designer, or someone who’s familiar with animation timings to tweak the things until it looks good. This is why when we set a border-radius value of 50% on a square box, we can get a perfect circle.Īnyway, for the pill-shape, setting the border-radius to half of the height of the element should do the trick. The value itself represents the radius of the circle at the corner of the box which affects how large the round corner is going to be. ![]() The pill-shapeįor the pill-shape, we call upon the trusty border-radius property. Then, there’s that gradient transition, and the final flourish is the light sweep effect. First, there’s the button itself when nobody is interacting with it. I have a standard approach to building any design with CSS, and that is to break things down into smaller bits. To explain in words, when you hovered over the pill-shaped button, the background changed from a plain white background to a nice coloured gradient, and there was a light sweep effect across the button. Recently, I came across an animation prototype on a button hover state and wanted to see if I could build it with just CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |