Draw Simple Icons with CSS
Using pseudo-elements like ::before and ::after we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.
[00:00] We're going to replace these radio buttons in the filter list with icons for each filter, indicating to the user what to-do items it's going to show and hide. We could bring these in as images, SVG or PNG, but they're just going to be fairly simple circles, so we can just draw them using CSS pseudo elements like Before and After.
[00:20] All of the filter labels are going to have a Before, because they're all going to have at least one circle. But the All label will have two circles, so we'll use an After on that one.
[00:34] To get pseudo elements to show up, we have to have the content attribute, but we're not going to be using it, so we're just going to set it to an empty string. We're going to bring these things down a little bit, so we're going to do a top of five pixels. They're going to be 10 pixels wide, 10 pixels high, and we're going to set a border radius of five pixels, so that they'll be circles.
[00:51] We can set the display to inline block or block, so that these things can have a width and height. Then we're going to set the position absolute, which will position them relative to the parent. We're going to set a box shadow, which will give us some separation, let them pop off the background a little bit.
[01:09] We're going to set the actual color here, just so we can see them. They're positioned weird, so let's get the left over to zero.
[01:24] Although these are radio buttons, we don't need to actually see the radio itself, so we're going to go ahead and hide these. We're going to do that by setting the position to absolute, which will remove it from the layout flow, meaning the rest of the elements will act like they're not there.
[01:37] Then we're going to set the opacity to zero, which will make it invisible. We could get rid of the mouse interactions, but we don't care whether they click on the label itself on these radio buttons. It's going to have the same behavior.
[01:50] The filter labels all have similar properties already assigned to them, but the All filter label needs a little bit more space for its icons, so we're going to change the panning left to be 21 pixels. Then we need to shift the After circle. We have a Before and an After, and we're going to shift the After over a few more pixels. We're going to set the left to five pixels and we'll be able to see it.
[02:13] OK, we've got the shapes of all the icons. The only thing that we need left to is to change the background color. We're only going to do that for the check state, so when the radio button is checked or selected, then it's going to change the background color of these icons. That'll make them pop a little more and make them a little bit more obvious that something is selected.
[02:31] If we go ahead and click through these different filters, we can see the icon color showing up, so we know that it's working. They correspond with the correct to-do list items, the red and the green.
[02:48] You can see that we can do some really simple drawing using CSS, using pseudo elements and not even having to make any changes to the dom to make this happen. If you go online, you'll find there are some people who have taken this concept of drawing using CSS a lot further.
[03:02] There are some real benefits. It doesn't have any additional requests, doesn't have any bloat from the images. It keeps things really small. For the right use cases, this is a great solution for the problem.