Archive | custom properties

RSS feed for this section

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.

The result we want to reproduce.

In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This …


Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input is a post from CSS-Tricks

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.

The result we want to reproduce.

In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This …


Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input is a post from CSS-Tricks

Simplifying the Apple Watch Breathe App Animation With CSS Variables

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let’s dive into it and see how!

The result we want to reproduce.
The structure

We keep the exact same structure.

In order to avoid writing the same thing multiple times, I chose to use a preprocessor.

My choice of preprocessor always depends on what I want to …


Simplifying the Apple Watch Breathe App Animation With CSS Variables is a post from CSS-Tricks

The CSS attr() function got nothin’ on custom properties

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn’t know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element.

It’s like this:

div::after {
content: attr(data-whatever);
}

That’s certainly interesting. You could use it for (rather inaccessible) tooltips, for example:

<button data-tooltip="Information only


The CSS attr() function got nothin’ on custom properties is a post from CSS-Tricks

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.

Before anything else, this is the animation we’re trying to achieve here:

The desired result:…


Creating Yin and Yang Loaders On the Web is a post from CSS-Tricks

Animating Single Div Art

One thing that single div pieces rarely do is animate. If you can transform your div or one of its pseudo elements, that’s fair (as Lynn Fisher does with her fantastic BB-8). But you cannot directly change the opacity or transform of the individual “elements” you create inside your div, since they are not actual DOM elements.

I am a big believer of trying something a little different and interesting to learn tools you otherwise might never learn. Working with the constraints of a single div might not be great for production work, but it can be a great exercise (and challenge) to stretch your skills in a fun way. In that spirit, we’ll use this technique to explore how Custom Properties (CSS Variables) work and even provide us a path to animation inside our div.


Animating Single Div Art is a post from CSS-Tricks

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than …


Simplifying CSS Cubes with Custom Properties is a post from CSS-Tricks

The Issue with Preprocessing CSS Custom Properties

CSS has Custom Properties now. We’ve written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don’t have them and never will. I can see the appeal of authoring with “future CSS”, and letting a preprocessor backport it to CSS that is compatible with older browsers. Babel for CSS! Why not?!

It makes me nervous though – because it’s only some use cases of Custom Properties that you can preprocess. …


The Issue with Preprocessing CSS Custom Properties is a post from CSS-Tricks

CSS Custom Properties and Theming

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of how they are live-interpolated. Should their values ever change (e.g. JavaScript, media query hits, etc) the change triggers immediate change on the site.

Cool, right? But still, how actually useful …


CSS Custom Properties and Theming is a post from CSS-Tricks

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

CSS Custom Properties give us the ability to reach into a property value and change certain parts of it. That’s useful in a bunch of places, but in particular, it’s useful in properties which don’t allow us to do it any other way.


Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually is a post from CSS-Tricks