How we can create a content filter using pure HTML and CSS? Solution: Check out this Pure CSS Content Filter With Smooth Switch, HTML CSS Category Filter.
Previously I have shared Category Filtering program, this is like that but using pure CSS. Basically, Content filtering a method to filter out different types of content by choosing their category. Filter program is common on all types of website, that can be eCommerce, blog, news site, etc.
Today you will learn to create a category filter program using only HTML and CSS. There is 3 types of color boxes and also 3 buttons for selecting boxes types. When you will select the red box button then only that colors box will visible other will hide. That’s thing create this a type of category filter, we can use images or cards replacing the boxes.
So, Today I am sharing Pure CSS Content Filter With Smooth Switch. This program is purely in HTML and CSS, there are no JS or any other libraries. This will be very useful for you, and even a beginner can understand easily the codes. This program is originally published by Mr. Sam Gordon, I saw that on the dribble.
If you are thinking now how this category filter actually is, then see the preview given below.
Preview Of HTML CSS Category Filter
See this video preview to getting an idea about how this content filter looks like.
Live Demo
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Pure CSS Content Filter With Smooth Switch Source Code
Before sharing source code, let’s talk about it. First I have created category filter and reset buttons using HTML <input> tag and used a label for each input. There I have used id and for method with input and label (info). After that, I have created some divs for creating the boxes, in the div places two class name one is ‘box‘ which is common in all the divs and other are colors names.
As you can see in the preview there are three types of color I have randomly placed class name in divs for colors, like for red I have put class name red. Now using CSS I have placed all the elements on right places, I gave label and divs width 23%. That’s creating the type of responsive design, means it will fit on every screen size. And all three class which are red, green, and blue put their background color according to their name.
For creating the filter, I gave some condition using CSS. The conditions are when we click on the red category button that’s mean the red button checked, and when red button checked then other blue and gree boxes width and height will be 0. The same condition is in other color boxes.
Left all other things you will understand after getting the codes, I can’t explain more in writing. For creating this program you have to create only two files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Pure CSS Content Filter | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>CSS CONTENT FILTER</h1> <div class="container"> <input type="radio" id="blue" name="color" /> <label for="blue">BLUE</label> <input type="radio" id="red" name="color"/> <label for="red">RED</label> <input type="radio" id="green" name="color"/> <label for="green">GREEN</label> <input type="radio" id="reset" name="color"/> <label for="reset">RESET</label> <div class="box blue">1</div> <div class="box red">2</div> <div class="box blue">3</div> <div class="box green">4</div> <div class="box blue">5</div> <div class="box red">6</div> <div class="box blue">7</div> <div class="box green">8</div> <div class="box red">9</div> <div class="box green">10</div> <div class="box red">11</div> <div class="box green">12</div> <div class="box blue">13</div> <div class="box blue">14</div> <div class="box green">15</div> <div class="box red">16</div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body{ margin:0; text-align:center; font-family: Verdana; background:#e9e9e9; } h1 { text-align:center; } .container { width:90%; margin:0 auto; } input[type="radio"] { display:none; } label { width:23%; float:left; text-align:center; background:#ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); color:#222222; padding:0.5%; margin:0.5%; margin-bottom:30px; cursor:pointer; } input[type="radio"][id="blue"]:checked + label { background:#208bfd; } input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green { width:0; height:0; padding:0; margin:0; opacity:0; } input[type="radio"][id="red"]:checked + label { background:#e60023; } input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green { width:0; height:0; padding:0; margin:0; opacity:0; } input[type="radio"][id="green"]:checked + label { background:#5cb85c; } input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red { width:0; height:0; padding:0; margin:0; opacity:0; } .box { width:23%; height:100px; float:left; transition:all 1s; margin:0.5%; padding:0.5%; line-height: 100px; } .green { background:#5cb85c; } .blue { background:#208bfd; } .red { background:#e60023; } |
That’s It. Now you have successfully created Pure CSS Content Filter With Smooth Switch, HTML CSS Category Filter. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Fantastic