Minding the gaps: A new way to draw separators in CSS

Minding the gaps: A new way to draw separators in CSS

Drawing separator lines between various sections of a webpage is a common design technique, which can help to structure the content and make it more readable, as well as more aesthetically pleasing. As we’ll see in this article, there are techniques you can use today...
CSS Animation with offset-path

CSS Animation with offset-path

This is from last year when I tried to recreate Rach Smith’s P5.js animation using CSS. The animation seemed like it could be implemented in a breeze, but there’s an illusion of simplicity. The process of manually updating the positions and directions of...
Grid First, Flex Third

Grid First, Flex Third

I’ve been mulling this topic for months now, and I’m pretty firmly of the opinion if you are attempting to do some layout in CSS, you should reach for display:grid first, followed by display:block, followed by display:flex. Grid allows the layout element to be in...
Expanding CSS Shadow Effects

Expanding CSS Shadow Effects

Design principles tell us a shadow is conveys that light is hiding an object, which casts the shadow behind it, giving us a sense of depth. However, if that’s all a shadow is ever used for, then it has not been utilized to its full potential.