Latest News

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.

(This is a sponsored post.)

With our robust SDK, super clean dashboard, detailed documentation, and world-class support, HelloSign API is one of the most flexible and powerful APIs on the market. Start building for free today.

Direct Link to Article — Permalink…

The post The industry’s best open API appeared first on CSS-Tricks.

Jonathan Snook on managing the complexity between what designers make and what developers end up building:

Everything that a designer draws in a Sketch or Photoshop file needs to be turned into code. Code needs to be developed, delivered to the user, and maintained by the team.

That means that complexity in design can lead to complexity in code.

That’s not to say that complexity isn’t allowed. However, it is important to consider what the impact of that complexity is—especially …

The post The Codification of Design appeared first on CSS-Tricks.