Archive | css variables

RSS feed for this section

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn’t look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let’s see how I did that!

The post 1 Element CSS Rainbow Gradient Infinity appeared first on CSS-Tricks.

Dark theme in a day

Marcin Wichary has written a great piece that dives into how he used CSS Variables to create a night mode and high contrast theme in an app. There’s so many neat tricks about how to use CSS Variables (Chris has also looked at theming) as well as how to organize them (Andras Galante has an interesting take on this) in here. Plus, Marcin shares some tricks about using filters to invert the color of an image.

I also …

The post Dark theme in a day appeared first on CSS-Tricks.

A Strategy Guide To CSS Custom Properties

CSS preprocessor variables and CSS custom properties (often referred to as “CSS variables”) can do some of the same things, but are not the same.

Practical advice from Mike Riethmuller:

If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables to custom properties usually makes little sense. After all, the reason for custom properties is completely different. Custom properties make sense when we have CSS properties that change relative …

The post A Strategy Guide To CSS Custom Properties appeared first on CSS-Tricks.

1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?

The desired results.

Well, this article is going to explain just how to do this and then also show how to make things fun …

The post 1 HTML Element + 5 CSS Properties = Magic! appeared first on CSS-Tricks.

Theming With Variables: Globals and Locals

Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity.

Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation. Let me show you how to do it by taking a fairly simple component as an example.

The post Theming With Variables: Globals and Locals appeared first on CSS-Tricks.

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.

The Problem

In order to better understand the issue at hand, let’s consider the …

The post What Houdini Means for Animating Transforms appeared first on CSS-Tricks.

Everything you need to know about CSS Variables

This is by far the biggest deep dive I’ve seen on CSS Variables posted to the web and it’s merely Chapter One of complete e-book on the topic.

Truth is, I’m still on the thick of reading through this myself, but had to stop somewhere in the middle to write this up and share it because it’s just that gosh-darned useful. For example, the post goes into great detail on three specific use cases for CSS Variables and breaks the …


Everything you need to know about CSS Variables 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

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