Filter Functionality with CSS3

Use checkboxes and radio buttons for filtering colored shapes

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial Mary Lou will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

 

Mary Lou starts with the markup. Her aim is to have four filter buttons that, once clicked, will make the respective type appear or stand out. So, she’ll use some radio buttons that all have the same name since they should belong to the same group (hence only one can have the “checked” state). By default, she want the “all” radio button to be selected or checked. Then add some labels for the radio buttons that she will use in order to hide the radio buttons. Clicking a label will select the radio buttons with the respective ID:

Comments

Be the first to write a comment

You must me logged in to write a comment.