About Us Pop-Out Effect

Cool demo that uses clip-path: path(…);, a feature that recently shipped with Chromium, making it supported in all three major rendering engines. See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen. Peeking under the hood – using the SVG Path Visualizer — you can see that it’s the .container-inner that is …

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 …

Emoji Customizer created with CSS Variables

Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer. The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ (“\u200d”) you can glue all …

<ol>‘s start and reversed attributes (and more)

#HTML tip for today: <ol> element has `start` and `reversed` attributes! Some examples where it's useful:`start` → paginated results`reversed` → "top 10 best … " lists pic.twitter.com/vkh88h2zGV — Tomek Sułkowski (@sulco) March 20, 2020 Handy for those end-of-year lists 😉 ~ Apart from overriding the list style using CSS’s list-style-type (which you should set it …