Monthly Archives: October 2018

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.

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.

Let’s assume we want a border on the bottom, left, and right (but not top) of an element.

Explicitly declare each side
.three-sides {
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px …

The post How Do You Put a Border on Three Sides of an Element? appeared first on CSS-Tricks.