Skip to main content
CSS is fun and cool and I like it.
Article

Ghost Buttons with Directional Awareness in CSS

It would surprise me if you'd never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction … Read article

Article

Weekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical Resources

In this week's roundup, Apple gets into web components, how Instagram is insta-loading scripts, and some food for thought for self-hosting critical resources.… Read article

Link

Simplicity

Article

Using Custom Properties to Wrangle Variations in Keyframe Animations

Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would be so nice to drop yet one more dependency and go with vanilla CSS.

Well, I found a way to account for variations within a keyframe animation using nothing but CSS and it’s thanks to custom properties! Let’s learn a little more about how CSS keyframes work and how we … Read article

Sponsored Article

Fast Static Sites with Netlify and AnyMod

In about 10 minutes, we'll set up a workflow that makes static sites dead simple.… Read article

Article

Logical Operations with CSS Variables

Very often, while using switch variables (a variable that's either 0 or 1, a concept that's explained in a greater detail in in this post), I wish I could perform logical operations on them. We don't have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function.

This article is going to show you what calc() formulas we need to use for each logical operation and … Read article

Article

Some HTML is “Optional”

There is a variety of HTML that you can just leave out of the source HTML and it's still valid markup.

Doesn't this look weird?

<p>Paragraph one.
</p><p>Paragraph two.
</p><p>Paragraph three.</p>

It does to me, but the closing tags are optional. The browser will detect it needs them and manifest correctly in the DOM anyway. … Read article

Link

Caniuse and MDN compatibility data collaboration

Article

Hamburger Menu with a Side of React Hooks and Styled Components

We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off screen, particularly on mobile where every pixel of space counts.… Read article

Article

“Off The Main Thread”

JavaScript is what they call "single-threaded." As Brian Barbour puts it:

This means it has one call stack and one memory heap.

We all feel a symptom of that regularly in the form of performance jank and non-interactivity on elements or entire sites. If we give JavaScript lots of jobs and it gets really busy doing them, then it's not doing other things, like, say, handling our event handlers quickly.

There has been an interesting point/counter-point combo recently along … Read article

icon-link icon-logo-star icon-search icon-star