This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

A nice CSS demo that uses 350% CPU

Description

The article <a href="https://www.bram.us/2021/03/03/mapping-mouse-position-in-css-demo/" author="Bramus">Getting the Mouse Position using CSS</a> talks about a neat trick that uses sibling elements to react to mouse events without using JavaScript. It also features some kick-ass translucency and animation effects with CSS transitions. As you move the cursor around, the layer of "cells" change X and Y positions that the CSS text elements "watch". This lets the central elements "follow" the mouse, transforming a stack of "CSS" texts in a nicely composed and layered stack. It looks like this. <img src="{att_link}image_2021-03-13_160129.png" scale="50%"> While this is a nice-looking effect---and it's impressive that it works purely in the browser and purely in CSS---it kicked in the fan on my iMac, something that rarely happens. That said, the compositing features of a modern browser are impressive and can save website authors a lot of time and effort. That this is even possible is already really, really nice. Maybe with a bit of tweaking, it can be made less detrimental to battery life. If you want to try it out yourself or tweak the code, check out the <a href="https://codepen.io/amit_sheen/embed/261df6f09d15a179b63454bb75acc191?default-tab=result&theme-id=1">CodePen</a>.