Wave

I like this demo. Very pleasing on the eyes.

To easily create WebGL demos the author created a little library called RGBA.js which is used under the hood.

Focusing on hiding WebGL/JavaScript code from you and giving ability to write fragment shader code only

Once included, this is the only code one has to write:

RGBA(`
float channel(vec2 p, float t) {
  float a = atan(p.x, -p.y);
  float w = sin(a*8.0 + t*2.0)*sin(t+a);  
  float d = length(p) - w*0.013 * smoothstep(0.85, 1.4, abs(a*0.5));
  d = abs(d - 0.25);
  return smoothstep(0.005, 0.0005, d);
}

void main() {
  vec2 p = gl_FragCoord.xy/resolution-0.5;
  p.x *= resolution.x/resolution.y;
  gl_FragColor = vec4(
    channel(p, time*0.7),
    channel(p, time*0.9+1.0),
    channel(p, time*1.1+2.0),
    1.0);
}
`);

More demos in this CodePen Collection

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:

  • The fine inner shadow on each segment is defined by the --bg1 Custom Property, and creates a depth effect. It gets flipped for the even segments.
  • The white fade on each segment which starts from the center is also a gradient.
  • Both of these are applied using multiple backgrounds: one being the fade, the other being the --bg1 one.

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
CSS Glitch
by Bramus (@bramus)
on CodePen.

Both demos work in a similar way: data is duplicated, and a clip-path is being animated on top of it.

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.

With a little CSS extra you can easily make Sunday the last day of the week — a format we prefer here in Europe:

.weekday:nth-child(1) {
  grid-column: 7;
  grid-row: 1;
}

.first-day {
  grid-column-start: 2;
}

See the Pen Simple Calendar With CSS Grid by Bramus (@bramus) on CodePen.

Additionally I’d further adjust the code to have the first day be set by use of a CSS Custom Property. That way the calendar would be able to display any month, without needing any CSS adjustments at all.

A Calendar in Three Lines of CSS →

☝️ If you haven’t by now, you really should learn CSS Grid and read up on its best practices.

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 that leverages Element.closest().

var menu = document.querySelector(".menu-dropdown");

function handleClick(evt) {
  // Only if a click on a dropdown trigger happens, either close or open it.
  …
  
  // If a click happens somewhere outside .menu-dropdown, close it.
  if (!evt.target.closest(".menu-dropdown")) {
    menu.classList.add("is-hidden");
  }
}

window.addEventListener("click", handleClick);

Here’s a pen with the result:

🔥 If you haven’t checked out Hakim El Hattab’s dynamically drawn hit areas for menus, as talked about in Building Better Interfaces, be sure to do so, as they’re amazing: