design tips

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. …

The post Material Design Animation Guides appeared first on CSS-Tricks.

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.

Normally that’s not a terribly huge problem. It may even be even useful, depending on the situation. But there are plenty of situations …

The post One Invalid Pseudo Selector Equals an Entire Ignored Selector appeared first on CSS-Tricks.

The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label moves from inside the input to outside of it.

Like so:

Although I don’t see this pattern used on the web all that much, I do think it’s an interesting one! There are different approaches to it, but Nick Salloum …

The post CSS Only Floated Labels with :placeholder-shown pseudo class appeared first on CSS-Tricks.

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:

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”;
});

See the Pen Move a background with mouse…

The post Moving Backgrounds With Mouse Position appeared first on CSS-Tricks.