Articles by

Chris Coyier

There is a such thing as an indeterminate checkbox value. It's a checkbox (<input type="checkbox"/>) that isn't checked. Nor is it not checked. It's indeterminate.

We can even select a checkbox in that state and style it with CSS!

Some curious points though:

1. It's only possible to set via JavaScript. There is no HTML attribute or value for it.
2. It doesn't POST (or GET or whatever else) or have a value. It's like being unchecked.

(more…)

There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element.

Here's an example:

<div data-done="&#x2705;"
  class="email">
    chriscoyier@gmail.com
</div>

.email::before {
  content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}

The property generally takes anything you drop in there. However, there are some invalid values it won't accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things.

(more…)

I've seen two guides posted to Medium about animation in the last month that have seriously blown up!

• Taras Skytskyi's The ultimate guide to proper use of animation in UX
• Jonas Naimark's Motion design doesn’t have to be hard

There is a lot to learn in each one! The demonstration animations they use are wonderfully well done and each guide demonstrates an interesting and effective animation technique, often paired next to a less successful technique to drive the point home. They are both heavily focused on Material Design though, which is fine, but I think Val Head said it best:

Google wrote material design for branding Google things. When you use material design on things that aren’t Google, you’re kind of using Google’s branding on a thing that is not Google, and that’s weird. Material design is Google’s opinion on motion. It’s Google’s branding opinion on motion. It’s not a de facto standard of how motion should happen.

Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example:

div, span::butt {
  background: red;
}

Even though div is a perfectly valid selector, span:butt is not, thus the entire selector is invalidated — neither divs nor span::butt elements on the page will have a red background.

(more…)

Let's say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this:

<div class="module" id="module"></div>

And you toss a background on it:

.module {
  background-image: url(big-image.jpg);
}

You can adjust the background-position in JavaScript like this:

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});

(more…)

I saw a little conversation about this the other day and figured it would be fun to look at all the different ways to do it. None of them are particularly tricky, but perhaps you'll favor one over another for clarity of syntax, efficiency, or otherwise.

(more…)