Coding Randomized Zelda Patterns

I’ve been really enjoying the latest Zelda game, Tears of the Kingdom. One of the ways the game creates a cohesive aesthetic is by repeating patterns between the game environment and interface screens. There was one pattern in particular that I was drawn to. This repeating circle motif can be found throughout the game’s many shrines and on interface screens. I really enjoy creating procedurally generated artwork using JavaScript and SVGs and was inspired to generate similar patterns myself.

Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images

CSS has all kinds of tricks that are capable of turning images into neat, interactive elements. This article is a collection of fancy 3D effects for images that demonstrate those CSS powers. Get ready to learn how they work as we get our hands dirty with CSS features that add perspective, depth, rotation, and even a slick shine to images that you can use on your next project.

CSS Findings From The Threads App

When I encounter a new product, one of the first things that comes to mind is how they implemented the CSS. This was no different when I came across Threads by Meta. I quickly explored the mobile app and noticed that I could preview public posts on the web. This presented an opportunity for me to dig deeper. I came across a few interesting findings, which I will discuss in this article.

From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry

Amidst the obstacles, we discovered the sheer power of modern CSS features. By embracing techniques like CSS Cascade Layers, container queries, custom properties, and subgrid, we were able to unlock a whole new world of possibilities.

CSS-Only Scroll Animations

Scroll-Driven Animations usually are something you would need to reach towards JavaScript for, either using something like the Intersection Observer API or a library such as GreenSock Animation Platform to accomplish. However, a new feature is coming to the CSS specification, enabling scrolling as a timeline for CSS animations.