CSS custom properties or variables with more examples

CSS custom properties or variables with more examples

8th September 2018 0 By Azadeh

We explain CSS custom properties or variables with more examples in this article. We had another article here with an example from Wes Bos. In this article we use some more examples around this topic.

Theming a site with CSS custom properties

This example is from Chris Coyier and we will check how we can change the colour of the site as the theme colour via Javascript using CSS custom properties:

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

Practically we could use CSS variables anywhere we like. One of the good options is where we let the user to change the site’s theme for example. In the example above we have a main colour which we potentially want to use around the site. Generally in the title and subtitle and the footer background:

:root {
--mainColor: #f06d06;
}

Therefor we have an input to make the changes:

<input type="color" />

Thankfully we are able to change the colours via Javascript just like we do with styling but this time we dynamically change the colour using CSS custom properties:


Moreover as you see here we could store the colour in a local storage or a database for later usage. This is a great simple example on how to use CSS custom properties for theming your application or site.

Using CSS custom properties for animation

As a good example for animation I am referring to this one from sitepoint. Here we have SVG to create the fish:

See the Pen Simple Animation with CSS Variables and SVG by SitePoint (@SitePoint) on CodePen.

As an explanation to animate an <ellipse> element with the class of .bubble inside an SVG graphic we would do this:

.bubble {
--direction-y: 30px;
--transparency: 0;
animation: bubbling 3s forwards infinite;
}

@keyframes bubbling {
0% {
transform: translatey(var(--direction-y));
opacity: var(--transparency);
}
40% {
opacity: calc(var(--transparency) + 0.2);
}
70% {
opacity: calc(var(--transparency) + 0.1);
}
100% {
opacity: var(--transparency);
}
}

So we define the CSS custom properties in the target element and then we refer to them in the keyframe like above. We also use the calc() function to add more flexibility to the property change at some points.

Also this is the code for the small fishes moving around. Each one with different delays:

.small-fish {
--dir-left: -800px;
--dir-right: 800px;
--transparency: 0;
}
0% {
transform: translatex(var(--dir-right));
}
50% {
opacity: calc(var(--transparency) + 0.3);
}
100% {
transform: translatex(var(--dir-left));
opacity: var(--transparency);
}
}

The neat thing about using CSS variables in this case is that you can tweak your animations simply by modifying the variables’ values inside the appropriate selectors. No need to look for each of the properties inside all the @keyframes directives.

In this article we had a look at two great examples of having CSS custom properties too be used as theming and in animations. You can read more on this awesome article and this one as mentioned. Thanks for reading.