In this article, I will demonstrate how to use modern CSS tricks to create visually appealing CSS ribbon shapes with minimal code. These ribbons will also have hover animations. Unlike traditional CSS ribbons, which often rely on fixed dimensions and complex calculations, the ribbons we will create here use a single element and CSS variables for easy customization. The shapes will automatically adjust to fit their content, eliminating the need to manually adjust text sizing.
To begin, let’s define the variables for our folded ribbon shape:
“`html
“`
Next, we’ll utilize the `clip-path` property to create the folded shape. The `clip-path` property allows us to define a polygon shape to clip the element. We’ll also add some padding to ensure the text is not cut off. Here’s the updated code:
“`html
“`
We’ll also use the `lh` unit, which represents the line-height value, to ensure the shape adjusts based on the content. The `1lh` value represents the height of the element.
To create the folded part, we’ll update the `clip-path` property to include additional points that extend outside the element. We’ll use a box-shadow to make these hidden parts visible. Here’s the updated code:
“`html
“`
Finally, we’ll add a gradient and additional box-shadow to create a shadow effect for the ribbon shape.
To create the second ribbon shape (the green one), we’ll follow a similar approach but with a different polygon shape. We’ll invert the polygon of the first ribbon to achieve the desired shape.
To add hover animations to the ribbons, we’ll update the polygon on hover by offsetting certain points. We’ll define a CSS variable to control the offset and update it on hover. This will create the illusion of movement. Here’s the code:
“`html
“`
For the second shape, we’ll use trigonometric functions, CSS variables, and the `calc()` function to achieve the desired shape. We’ll also utilize pseudo-elements to create additional elements and apply transformations and clip-paths to achieve the desired effect. The code for the second shape is more complex and involves more calculations, but the principle remains the same: use CSS variables to control the shape and apply transformations and clip-paths to achieve the desired result.
By following these steps, you can create visually appealing CSS ribbon shapes with minimal code and add hover animations for an extra touch of interactivity.
Source link
