🔰 Blend modes in CSS

Blend modes allow you to create various visual effects, including mix and background blending, colored areas, duo-tone, halftone, scanned lines, and emboss effects.

You can also use blend modes to control how elements on a web page blend with their backgrounds or with other elements.

In CSS, the "cap" unit is defined as the size of the capital letter of the current font size.

🤩 This is very handy for defining icons that accompany some label, such as inside bottons

In this example, we have defined an icon with height 1cap, which makes it equal to the letter "S" height.

We also have aligned this icon to the baseline for a perfectly aligned text and icon ✨

🔰🔰 Creating a funky cool sidebar animation in CSS is not that complex 🔥

Here we create a simple animation to hide and show the sidebar, while translating the main content of the page to the right.

👉 If you want to cut down the funkyness, you could also skip the scale and use only translate

Play with different values for timing functions, duration etc to achieve the effect you need! If you build something I'd love to see it, send them my way! 📥