CSS Sticky Parallax Sections Demo

Nice demo on CodePen by Ryan Mulligan, featuring some sections with a sticky parallax background image: See the Pen CSS Sticky Parallax Sections by Ryan Mulligan (@hexagoncircle) on CodePen. I expected to find the the translateZ() + scale() method to create the parallax layers in there, but turns out Ryan took another approach: Scale down …

CSS Paper Snowflakes

Nice demo by Michelle Barker, in which she recreates snowflakes based on those folded paper cutouts we all made as a child. ⚠️ Warning: quite a heavy demo. Uses both a clip-path and mask-image to generate the cutout shapes. And oh, everything’s defined using Custom Properties. Love the attention to detail on this one too: …

Cyberpunk 2077 Button Glitch Effect in CSS

Wonderful demo by Jhey Tompkins, showcasing some recreated glitch effect buttons based upon Cyberpunk 2077. Recreate the Cyberpunk 2077 Button Glitch Effect in CSS → If you can’t quite follow there — as it’s quite a big demo — here’s a more simplified demo from 2015 featuring a simple glitch text effect: See the Pen …

A Calendar in Three Lines of CSS

Here’s a little CSS Grid use case where a list of days is transformed into a calendar: See the Pen Simple Calendar With CSS Grid by Calendar Tricks (@calendartricks) on CodePen. My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest way to show the amazing capabilities of CSS grid. …

Using JavaScript’s closest() Method to Capture a “Click outside” an Element

In Practical Use Cases for JavaScript’s closest() Method, Andreas Remdt talks about some nice use cases that use Element.closest(). I especially like this example with a menu. Click on one of the links and it will show the menu which has the class menu-dropdown. Clicking outside said menu will close it. It’s that latter one …