Select Page

Category: custom properties

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be. Sliced gradient disc. The first thought was that this should be doable with border-radius, right? Well, no! The thing with border-radius is that it creates an elliptical corner whose ends are tangent to the edges it joins. My second thought was to use a circle() clipping path. Well, turns out this solution works like...

Read More

Styling a Web Component

This confused me for a bit here so I’m writing it out while it’s fresh in mind. Just because you’re using a web component doesn’t mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this: See the Pen Web Component with Global Styles (because no Shadow DOM) by Chris Coyier (@chriscoyier) on CodePen. That element isolated the JavaScript-powered functionality of itself by attaching a click handler to the inside of it. But the styling of that button comes from global...

Read More

Keep Math in the CSS

There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. This is for math that you could calculate at authoring time, but specifically chose not to. For instance, if you needed a 7-column float-based grid (don’t ask), it’s cleaner and more intuitive: .col { /* groan */ width: 14.2857142857%; /* oh, I get it */ width: calc(100% / 7); } You could probably prove that the calc() takes the computer 0.0000001% longer, so explicitly defining the width is technically faster for performance reason — but that is about the equivalent...

Read More

Updating a CSS Variable with JavaScript

Here’s a CSS variable (formally called a “CSS custom property“): :root { --mouse-x: 0px; --mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(--mouse-x); top: var(--mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventListener("mousemove", e => {'--mouse-x', e.clientX + "px");'--mouse-y', e.clientY + "px"); }); That’s all. See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks....

Read More

Super-Powered Grid Components with CSS Custom Properties

A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes to components. In this article I’ll address using CSS grid at the component level. Grid is neither a substitute for flexbox nor vice versa. In fact, using a combination of the two gives us even more power when building components. Building a simple component...

Read More