Here is a full demo of the css which I’ll show you how to build, by learning the structure of the css
background shorthand property.
Before today I’ve always shied away from full understanding all of the shorthand property capability that is baked into the background
attribute but today i'm going to change that, let's work it out together, let's deconstruct this bit of css that constructs the progress indicator card together:
You might be thinking, why do this with a single css property? You could just do this with multiple css properties or html elements, heck even the built in
meter html element. These things are all true however there may be some cases where just manipulating a single css property to create effects like this is handy:
- You’re in a design system and you can only change the background property.
- You’re in some system where you are unable to modify the HTML.
- It’s fun.
Breaking down the css background property
Prior to experimenting to create this effect i’d never really gone into too much detail about the capabilities of the background property in css, but it is really quite fantastic! The fact that you can apply multiple backgrounds and their properties using a single css property is very powerful and not something i’d really appreciated before.
To understand css snippet from above it would probably be a good idea to expand into using the non-shorthand background properties, to help understand and breakdown what’s going on above:
is equivalent to:
What is going on is that we have two backgrounds:
linear-gradientwhich starts off green
#65ad60, moving to the right and at 30% turns into light cream
- a block sand-like color of
Note how we are separating the background with a comma
,. The same is done for
background-repeat has just one value because I want the same value for each background, but I could have done
background-repeat: no-repeat, no-repeat.
background-size property we first have width, followed by height. So the first background size says a width of 100% and a height of 10% which gives us the height of the progress bar. The
no-repeat is important, without it the background would just duplicate itself until it filled 100% of the image, as repeat is the default. It's probably useful to note that you may have multiple background images too, which can be an image url or a gradient.
Converting to shorthand
To convert the
background-repeat to the shorthand
background it's similar to the long form properties. There is a slightly different syntax for
background-size as you also need to account for
background-position which is a property which I have omitted from my long hand, it would be something like:
In order to specify the
background-size when using the
background shorthand you must also specify the position, to do this you separate the position and the size with a forward-slash
For example, here is the first of the backgrounds:
Whilst writing this article I came across this handy website that generates the shorthand for you, test it out with the above css, you should get a single
background property generated for you!
Internally it looks like this website uses this package: https://github.com/frankmarineau/shrthnd.js.
Hopefully you can now see how we got to the final css, by adding in the
background-color and position values after a comma
There is a lot more to the css background property, as always, your best bet for research is MDN.
Spicy CSS Custom properties
Now we’ve had a play with the background property, let’s see if we can make the css a little more useful, by introducing css custom properties we now have the possibility of re-using the same css with different values for percentage “progress”, or changing the background colors.
If you are new to CSS Custom properties Kevin Powell does a great introduction over here.
Hopefully you can see how you can change the look of each “card” just by modifying the css custom property for that card only.
Here is a live demo of the html and css: https://codepen.io/georgegriff/pen/RwZRBeJ
Make it a component
You could next choose to create a re-usable component, for example a Web Component, that could set the css custom properties and add appropriate aria attributes.
It’s important to note that this css-based progress indicator is purely decoration, you will want to ensure that users with screen readers are able to understand what the component is conveying, using aria attributes in your HTML, or appropriate text labels.
You can learn about ARIA basics on MDN here.