Collective #806

No. 806,  January 15, 2024   View in browser

Collective Cover

Olá, frontend friends! 👋

I hope this Monday is treating you well and that you’re working on something exciting! We’ve got lots of fresh and interesting frontend links for you, so grab a coffee or tea and enjoy these reads as short breaks; they might help you with your work!

I’m really excited about this week because we’ve got some seriously great articles heading your way on our blog!

Here’s to a great start of the week!

🤖 (sponsored)

Meet Divi AI – your smart sidekick integrated into Divi, the most loved WordPress theme on the planet. It crafts content, writes code, and designs images right in the builder. With special knowledge about every Divi element, it creates top-notch, tailored content, blending the skills of a writer, web developer, and digital artist. Take your website to the next level effortlessly with Divi and Divi AI!

🔎 Behind the Pixel

Finally we are back with our Monday edition where we have a look “behind the pixel” of a nice little effect! This time we spotted a fun x-ray effect seen on Concept Capers. It’s running automatically, but we can also hover with the mouse and it will be interactive.

When we open the Dev Tools, we can see that there are a few elements that play a key role. We have an underlying image (the one with the white letters), a top x-ray image, and another circular element that follows the mouse. The top x-ray image gets a circular clip path applied to and the moving element has a thick black border.

How are the elements positioned? It’s all cleverly done by setting the –cursor-x and –cursor-y variables in the parent using JS! Cool technique!

Video Vault

Demo Corner

❓Did you know that…

…GeoCities, an early web hosting service, allowed users to create their own websites organized into ‘cities’? Launched in 1994, GeoCities became a virtual community where users could build web pages and connect with others who shared similar interests. Sadly, GeoCities was shut down in 2009 (in Japan until 2019), but its legacy lives on as a nostalgic symbol of the early days of user-generated content on the internet.

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!

Your Codrops team xxx

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


Shopping Cart

Hi There!

× How can I help you?