Collective #798

Dec 12, 2023


Codrops logo Collective 798

Welcome to Collective #798

We have a bit of an AI fiesta today (because who wouldn’t want to welcome our machine overlords?). Ever thought about wrapping your head around LLMs? Just a wild thought for job security… just kidding. But seriously, diving into it might make those future tech updates way more meaningful for us devs. Ready to take the plunge into the impending robot apocalypse? Let’s do this!

But no worries, we’ve got some other interesting frontend and design links to offer—a little breather from the AI madness!

Have a great week ahead and happy exploring!

Choose Cloud, Dedicated, or vServer at budget-friendly rates for your gaming server. Design your laaS to match your project’s needs with full root access.

Find out more 👉

Behind the Pixel 🔎

In this section, Manoela examines small design and animation details and takes a peek under the hood to see how they are accomplished.

This week, I found this little trick for creating an interesting menu background animation using “slices”. How is this accomplished? When we look at the markup and CSS, we can see that a clip-path animation is employed to cut off each slice, which is a span in the HTML. When you toggle the clip-path property, you will see the slice retracting/expanding visually.

It’s great that this is CSS-driven; only classes are applied to trigger the transition of the clip-path property. Individual delays are set in nth-child rules. Although this effect can be achieved by scaling down the elements or by translating them out of view (both of which are better performance-wise), using clip-path is a clever technique, especially when considering other shapes!

Video Vault

Demo Corner

From our blog

❓Did you know that…

…the concept of the “hamburger icon,” a common symbol used in user interfaces to represent a menu, originated in the early 1980s? Norm Cox, a graphic designer, is credited with creating this iconic symbol while working on the user interface for the Xerox Star, one of the earliest personal computers with a graphical user interface. Here’s a nice article about it.

And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!

Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.


Source link

Leave a Reply