Free Filter Functionality Tutorial with CSS3

DEMO - DOWNLOAD - URL

The Markup

Let’s start with the markup. Our aim is to have four filter buttons that, once clicked, will make the respective type appear or stand out. So, we’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, we want the “all” radio button to be selected or checked. We’ll add some labels for the radio buttons that we will use in order to hide the radio buttons. Clicking a label will select the radio buttons with the respective ID:

01	<section class="ff-container">

02

03	<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />

04	<label for="select-type-all" class="ff-label-type-all">All</label>

05

06	<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />

07	<label for="select-type-1" class="ff-label-type-1">Web Design</label>

08

09	<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />

10	<label for="select-type-2" class="ff-label-type-2">Illustration</label>

11

12	<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />

13	<label for="select-type-3" class="ff-label-type-3">Icon Design</label>

14

15	<div class="clr"></div>

16

17	<ul class="ff-items">

18	<li class="ff-item-type-1">

19	<a href="http://dribbble.com/shots/366400-Chameleon">

20	<span>Chameleon</span>

21	<img src="images/1.jpg" />

22

</a>

23

</li>

24	<li class="ff-item-type-2">

25	<!-- ... -->

26

</li>

27	<li class="ff-item-type-3">

28	<!-- ... -->

29

</li>

30	<!-- ... -->

31

</ul>

32

33	</section>

The unordered list will contain all the portfolio items as anchors with an image and a span. Each list element will have a type class that will make it possible to identify those elements and “filter” them when we click on one of the radio buttons.

The CSS

We’ll be going through three example effects, but first, let’s take a look at the common style.
I will omit all the vendor prefixes, but you will, of course, find them in the files.
The main section container will have a specific width:

1	.ff-container{

2	width: 564px;

3	margin: 10px auto 30px auto;

4

}

The labels will cover the radio buttons and we’ll give them a fancy gradient and some subtle box shadows:

01	.ff-container label{

02	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

03	width: 25%;

04	height: 30px;

05	cursor: pointer;

06	color: #777;

07	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

08	line-height: 33px;

09	font-size: 19px;

10	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

11	float:left;

12	box-shadow:

13	0px 0px 0px 1px #aaa,

14	1px 0px 0px 0px rgba(255,255,255,0.9) inset,

15	0px 1px 2px rgba(0,0,0,0.2);

16

}

At the corners we want some rounded edges, so the first label and the last one will get this specific border radius:

1	.ff-container label.ff-label-type-all{

2	border-radius: 3px 0px 0px 3px;

3

}

4	.ff-container label.ff-label-type-3{

5	border-radius: 0px 3px 3px 0px;

6

}

For every checked radio button, we want the respective label to have this “pressed” style:

01	.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,

02	.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,

03	.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,

04	.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{

05	background: linear-gradient(top, #646d93 0%,#7c87ad 100%);

06	color: #424d71;

07	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);

08	box-shadow:

09	0px 0px 0px 1px #40496e,

10	0 1px 2px rgba(0,0,0,0.1) inset;

11

}

Since we have all our elements in one level, we use the general sibling combinator which is represented by a “tilde” (~) character, in order to reach the respective label. With this “trick” we will also get to all those different types in the portfolio list.
The inputs can be hidden, since we have our labels that will do the job:

1	.ff-container input{

2	display: none;

3

}

Let’s move on to the item list:

1	.ff-items{

2	position: relative;

3	margin: 0px auto;

4	padding-top: 20px;

5

}

The anchor and the span element will have the following style:

01	.ff-items a{

02	display: block;

03	position: relative;

04	padding: 10px;

05	background: #fff;

06	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

07	margin: 4px;

08	width: 160px;

09	height: 120px;

10

}

11	.ff-items a span{

12	display: block;

13	background: rgba(113,123,161, 0.9);

14	font-style: italic;

15	color: #fff;

16	font-weight: bold;

17	padding: 20px;

18	position: absolute;

19	bottom: 10px;

20	left: 10px;

21	width: 120px;

22	height: 0px;

23	overflow: hidden;

24	opacity: 0;

25	text-align: center;

26	text-shadow: 1px 1px 1px #303857;

27	transition: all 0.3s ease-in-out;

28

}

29	.ff-items a:hover span{

30	height: 80px;

31	opacity: 1;

32

}

33	.ff-items li img{

34	display: block;

35

}

When we hover over an anchor, we’ll make the span appear from the bottom, animating its opacity with a transition.

Allright, that was all the “common” style. Now, let’s see how we can filter those elements in style!