Just over a week ago I announced my CSS3 sticky note experiment and the response was amazing. A huge thanks to everyone that shared them! Today I have a new project to share — CSS progress bars.
One of my big goals was to use as little markup as possible — my target was just one element. Although it took some creativity, I was able to pull it off by making extensive use of CSS’s
:after psuedo selectors.
I started off with a
<div> with a class of
progress-bar as my base. I rounded the corners and gave it a partially transparent, black background. To this added a few subtle
box-shadows to give it some depth.
Next, I set up a few global styles for my
:after selectors, setting the
content: ''; and giving them the size and position I wanted. Then, to the
:before selector I added my gradient. At this point, I had a fairly nice looking progress bar, but I still wanted to add the vertical striping. To do this, I used the
:after pseudo selector and set the content as follows:
content: '|||||||||||||||||';. After that, it was as easy as cranking up the
font-size up to
120px, skewing it with a
skewX transform, and messing with the
letter-spacing until I got the spacing I wanted.
If you’ve got any questions, comments or complaints, tweet me @galengidman.