I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever, only worked on fixed-width containers, and used a lot of CSS to achieve the effect; by sacrificing a small amount of backwards compatibility, I think there’s a better option.

This mini-lesson might be considered part of a push to re-imagine website layout: for the longest time we’ve been reliant on three-column grids and 90° angles. But with a little imagination, we can do so much more:

Read more about Slanted Bottom Border

There are few problems more exasperating in front-end design than dealing with unexpected gaps in web page elements. Determining the cause of an extra few pixels inside a container, or the appearance of space between elements that are meant to exist seamlessly side-by-side, can soak up a great deal of developer’s time and effort.

To help, here’s a short list of the six most common causes for gaps, and their solutions:

Read more about 6 Treatments for Unwanted Page Gaps

Recently I’ve been thinking about how pages might start to break out of the “boxes inside boxes” trope that’s built up in web design over the past few years. One way to break through limitations is to merge two different creative possibilities: in this case, CSS clip-path and the Shapes module.

Read more about New Layouts with clip-path and shapes